AJAX学习小结(一)

最新推荐文章于 2023-03-23 18:53:17 发布

帅哥学Java

最新推荐文章于 2023-03-23 18:53:17 发布

阅读量247

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/ls_wifi/article/details/102643142

版权

前端基础专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一、全局刷新和局部刷新

1）全局刷新：浏览器在得到服务端返回的数据后，只能展示得到数据不能同时展示浏览器之前内容

2) 局部刷新: 浏览器在得到服务端返回的数据后，同时展示原有的数据和得到新数据

二、全局刷新与局部刷新工作原理

1.全局刷新工作原理：

1）必须由浏览器负责将【请求协议包】推送到服务端

2）导致服务端将【响应协议包】直接推送到浏览器内存

3）导致浏览器内存中原有的数据原有的数据被覆盖

4）导致此时浏览器在展示数据时，只能展示得到响应数据无法展示原有的数据。

2.局部刷新工作原理：

1）必须禁止由浏览器向服务端发送请求

【此时不能使用超链接，form,window.location】

2）由浏览器内存中一个【脚本对象】代替浏览器将【请求协议包】发送到服务端

3）这将会导致服务端返回的【响应包】直接推送到这个【脚本对象】上

4）导致脚本对象内容被覆盖，但是此时浏览器内存中绝大多数内容没有受到影响

5）开发人员从【脚本对象】上取出【响应数据】更新到浏览中指定标签上

6）此时浏览器在展示数据时，就可以既展示响应结果同时又可以展示原有的内容

三、AJAX：

1.AJAX帮助开发人员管理浏览器中【异步请求对象】

2.AJAX名词:Asynchronization JavaScript And Xml

四、AJAX开发步骤:

1.在浏览器内存中，创建一个脚本对象，就是异步请求对象

2.为【异步请求对象】添加【工作状态监听器】帮助开发人员确认何时从【异步请求对象】身上

得到服务端返回响应数据

3.初始化【异步请求对象】

第一个：通知【异步请求对象】采用何种方式发送【请求协议包】 POST/GET

第二个：通知【异步请求对象】本次要访问的资源文件地址

第三个：通知【异步请求对象】在其工作期间，浏览器是否会等他。【同步请求，异步请求】

4.命令通知【异步请求对象】代替浏览器发送请求

五、同步请求与异步请求区别：

1.同步请求：在当前异步请求对象工作期间，浏览器只能处于等待状态，直到当前异步请求对象工作完毕，浏览器才可以委派其他异步请求对象发送请求

2.异步请求：在当前异步请求对象工作期间，浏览器可以继续委派其他的异步请求对象发送其他请求

六、AJAX命令

1.如何创建一个【异步请求对象】

所有浏览器都有一个内置方法:new XMLHttpRequest();

var xmlHttp =new XMLHttpRequest();

2.如何为【异步请求对象】绑定【工作状态监听器】 obj.监听器=function()

xmlHttp.onreadystatechange=function(){

};

每当这个异步对象工作状态发生一次改变的时候，这个函数就会被调用。

3.如何初始化【异步请求对象】

xmlHttp.open("post/get","/myWeb/onServlet?uname=smith",true)异步

//xmlHttp.open("post/get","/myWeb/onServlet?uname=smith",true)同步

4.如何命令【异步请求对象】代替浏览器发送请求

xmlHttp.send()

七、异步请求对象工作状态：5种

1.readyState属性：存储当前的工作状态

2.含义：

xmlHttp.readyState 状态发生位置

0 异步请求对象 var xmlHttp= new XMLHttpRequest();

已经被创建完毕

1 异步请求对象 xmlHttp.open("post/get","/myWeb/onServlet?uname=smith",true);

已经被初始化完毕

2 异步请求对象 xmlHttp.send();

已经发送了请求协议包

如果正常情况，此时服务端

应该正在处理这个请求

3 异步请求对象已经得到

服务端返回的响应包

此时异步请求对象正在

解析响应包中响应体内容

4. 异步请求对象已经解析数据

完毕，此时数据是符合脚本开发人员可以提取响应数据

规范的数据

八、如何从异步请求对象身上得到响应数据，进行局部刷新

xmlHttp.onreadystatechange=function(){

//每当事件处理函数被调用时，都需要询问异步请求对象当前工作状态

if(xmlHttp.readyState==4&&xmlHttp.status=200 ){

//读取响应数据

var data=xmlHttp.responseText;

callBack(data);

}

};

//局部刷新实现函数

function callBack(param){

$("div").text(param)

}

例子:验证用户名是否已被注册

定义一个JSP:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用ajax发送get请求验证用户名是否可用</title>
<base href="${pageContext.request.scheme }://${pageContext.request.serverName }：${pageContext.request.serverPort }:${pageContext.request.contextPath }/"/>
</head>
<body>
   <script type="text/javascript">
   function ls1(username) {
	   //发送ajax请求，验证用户名是否可用
	   //1.创建一个异步请求对象
	var xmlHttp;
	  if(window.XMLHttpRequest){
		  xmlHttp=new XMLHttpRequest();
	  }else{
		  xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
	  }
	  xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status == 200){
				var nameTipMsg=document.getElementById("nameTipMsg");	
				nameTipMsg.innerHTML=xmlHttp.responseText;
			}else{
				alert(xmlHttp.status);
			}
		    
		}
	  }
	xmlHttp.open("GET","checkusername.do?username="+ username,true);//这里只开启通道，不发送请求
	//4.通知异步请求对象代替浏览器发送请求协议包
	 xmlHttp.send();
   }
</script>
     用户名:<input type="text" name="username" onblur="ls1(this.value);"><span id="nameTipMsg" style="font-size: 12px"></span><br>
     密码:<input type="password" name="password"><br>
</body>
</html>

定义一个Servlet:

package com.bjpowernode.ajax.web.action;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckUsernameAction extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		String username = request.getParameter("username");
		if("admin".equals(username)) {
			//用户名不可用
			response.getWriter().print("<font color='red'>用户名已被注册</font>");
		}else {
			//用户名可用
			response.getWriter().print("<font color='green'>用户名可用</font>");
		}
	}
}