Ajax知识点梳理

Posted 2021-06-03 o_o ....

Ajax简介

Ajax是一种页面异步请求的方式，即在不重新加载整个页面的情况下，与服务器交换数据并对页面局部更新。

非异步情况下：客户端发送请求后，等待服务器传送回一个html页面，客户端在等待页面的过程中无法操作。

异步请求情况下：可以认为客户端将会使用一个单独的线程发送请求，不会影响客户端当前页面。等待服务器响应回数据后，解析数据后嵌入到当前页面中。

Ajax应用

• Ajax是 Asynchronous javascript and XML的缩写。

• Ajax不需要插件支持，原生的JavaScript就可以使用。

Ajax的核心——XMLHttpRequest对象

• 下面列举该对象中常用的属性和方法

方法 | 属性	说明	权限
readyState	代表HTTP请求的状态码，取值空间为0-4	只读
responseText	返回一个DOMString，包含了请求的响应，如果请求未成功或尚未发送，则返回 null。	只读
responseXML	返回一个Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。	只读
status	返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。	只读
statusText	返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，"200 OK"）。	只读
onreadystatechange	readyState改变时的回调函数
open()	初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。
send()	发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
abort()	如果请求已被发出，则立刻中止请求。
getAllResponseHeaders()	以字符串的形式返回所有用CRLF分隔的响应头，如果没有收到响应，则返回 null。
setRequestHeader()	设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。【用例】myReq.setRequestHeader(header, value);

• 全部内容请查阅JavaScript API

• 特别说明：如果是IE5或者IE6浏览器，则使⽤ActiveX对象替代XMLHttpRequest

XMLHttpRequest使用示例

//第⼀步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) { 
	//⾮IE 
	xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { 
	//IE 
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//第⼆步：设置和服务器端交互的相应参数
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
//第三步：注册回调函数
xmlHttp.onreadystatechange = function() { 
	if (xmlHttp.readyState == 4) { 
		if (xmlHttp.status == 200) { 
			var obj = document.getElementById(id); 
			obj.innerHTML = xmlHttp.responseText; 
		} else { 
			alert("AJAX服务器返回错误！"); 
		} 
	}
}
//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname + "&userPass=" + upass + "&time=" + Math.random(); 
// 增加time随机参数，防⽌读取缓存 
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8"); 
// 向请求添加 HTTP 头，POST如果有数据⼀定加加！！！！
xmlHttp.send(params);

状态码

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

响应状态

1xx：指示信息--表示请求已接收，继续处理。

2xx：成功--表示请求已被成功接收、理解、接受。

3xx：重定向--要完成请求必须进行更进一步的操作。

4xx：客户端错误--请求有语法错误或请求无法实现。

5xx：服务器端错误--服务器未能实现合法的请求。

详情：CSND参考博文

jQuery的Ajax实现

JavaScript原生的Ajax方式步骤繁琐，实际开发中通常使用jQuery的Ajax实现

ajax()

ajax()是jQuery对Ajax的最底层的封装

• 使用示例

$.ajax({
	url: "http://localhost:8080/JsLearning3/getAjax",//请求地址
	type: "get | post | put | delete ",//默认是get
	data: {"id":"123","pwd":"123456"},//请求参数
	dataType: "html | text | json | xml | script | jsonp ",//请求数据类型
	success:function(data,dataTextStatus,jqxhr){ },//请求成功时 
	error:function(jqxhr,textStatus,error)//请求失败时
});

get()

$.get(url,data,function(result) {
	//省略将服务器返回的数据显示到⻚⾯的代码
});

post()

$.post(url,data,function(result) {
 //省略将服务器返回的数据显示到⻚⾯的代码
});

• 全部Ajax方法查阅jQuery API手册

JSON——Ajax数据交互格式

JSON (JavaScript Object Notation) 是⼀种轻量级的数据交换格式。 易于⼈阅读和编写。同时也易于机器解析和⽣成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition-December 1999的⼀个⼦集。 JSON采⽤完全独⽴于语⾔的⽂本格式，但是也使⽤了类似于C语⾔家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语⾔。

在JavaScript中使用JSON

//定义一个JSON对象
var jsonObj = {
	"key" : value , 	// Number类型
	"key2" : "value", 	// 字符串类型
	"key3" : [], 		// 数组类型
	"key4" : {}, 		// json 对象类型
	"key5" : [{},{}] 	// json 数组
};

JSON对象在JavaScript中的使用和其他对象完全相同

在JavaScript中使用JSON

在Java中JSON数据存放在一个字符串中，可以使用第三方的包格式化，或自行格式化。在 Java 中使用 JSON-CSDN博客