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博客