Ajax

AJAX 是一种用于创建快速动态网页的技术 是 HTML/XHTML 、 CSS 、 JavaScript/DOM 知识的结合应用，结合出的新技术新方法 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。可在不重新加载整个网页的情况下，对网页的某部分进行更新

JQUery中文API1：https://www.jquery123.com/

JQUery中文API2：https://jqueryapi.net/

Ajax工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，客户端操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

点击异步了解 (opens new window)

以下图片服务器处理为单线程！！！

Ajax对象

核心对象

不同的浏览器 加载使用的对象是不一样的，可分为两种：

• XMLHttpRequest ：AJAX核心对象 （用于常规的浏览器 ==let xmlHttp = new XMLHttpRequest()==
• ActiveXObject ：IE 浏览器 ==let xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");==

判断浏览器类型的 ==window.XMLHttpRequest== 属性 返回的布尔值进行判断 （false 为 IE浏览器

属性

常用属性	说明
onreadystatechange	处理服务器响应的函数
readyState	服务器响应的状态信息
responseText	取回由服务器返回的数据
status	服务器的HTTP状态码
更多属性	说明
responseXML	服务器的响应(返回DOM的XML文档对象)
responseBody	服务器返回的主题(非文本)
responseStream	服务器返回的数据流
statusText	服务器返回的状态文本信息(对应HTTP状态码文本信息)

readyState属性状态说明

readyState值	说明
0	请求未初始化(调用open()之前)
1	请求已提出(调用send()之前)
2	请求已发送(从响应得到内容头部)
3	请求处理中(响应中，数据可用，但服务器未完成)
4	请求已完成(可以访问响应的结果并使用)

点击了解status属性状态码 (opens new window)

方法

常用方法	说明
==open(String method, String url, boolean async)==	设置请求的类型、URL 以及是否异步处理请求
==send(String string)==	将请求发送到服务器 POST请求需要传递参数
更多方法	说明
==abort()==	停止当前请求
==getAllResponseHeaders()==	把HTTP请求的所有响应首部 键/值 返回
==getResponseHeader()==	返回指定首部的串值
==setRequestHeader(String header, String value)==	向请求添加 HTTP 头

Ajax应用

应用步骤：

1. 创建 XMLHttpRequest对象
2. 设置请求方式
3. 调用回调函数
4. 发送请求

对象创建

对象创建说明：

XMLHttpRequest对象

variable=new XMLHttpRequest();

老版本浏览器ActiveXObject对象

variable=new ActiveXObject("Microsoft.XMLHTTP");

所有浏览器对象创建

var xmlHttp;
if (window.XMLHttpRequest) {
 xmlHttp = new XMLHttpRequest();
} else {  //照顾 IE使用者
 if (window.ActiveXObject) {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
}

请求方式

请求类型分为 ： Get 、Post两种 请求发送到服务器，需要用到 open() 和 send() 方法

GET 请求

例子：向服务器发送 testGet 的请求

//无信息
xmlHttp.open("get","testGet",true);
xmlHttp.send();
//为url添加信息
xmlHttp.open("get","testGet?name='张三'&age=23",true);
xmlHttp.send();

POST 请求

例子：向服务器发送 testPost 的请求 使用post请求需要配置：xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//无信息
xmlHttp.open("post","testPost",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send();
//有信息
xmlHttp.open("post","testPost",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var name = "张三";
xmlHttp.send("name="+name+"&age=23");

注意：

• get请求 单次数据上传有限
• 非 隐私/重要 数据交互用 get请求
• 大量数据交互用 post请求
• open() 最后参数是控制是否异步，一般默认true
• post请求 需要 setRequestHeader() 的配置

响应回调

回调函数，就是请求在后台处理完，再返回到前台所实现的功能（服务器响应后执行的任务） 回调需要显示在页面中因此需要 xmlHttp.onreadystatechange 属性返回匿名的函数进行页面交互

xmlhttp.onreadystatechange=function(){
     var mydiv = document.getElementById("myDiv");
     if (xmlhttp.readyState==4 && xmlhttp.status==200){
     	mydiv.innerHTML=xmlHttp.responseText;
     }else{
     	mydiv.innerHTML="异常："+xmlhttp.status;
     }
}

服务器响应

responseText属性 接收 字符串形式 的响应数据 Response响应 需要 PrintWriter流 进行输出 字符串形式的响应数据

PrintWriter writer = response.getWriter();
writer.println("输出内容");

//页面获取方式
var text = xmlHttp.responseText;

responseXML属性 接收 XML形式 响应的数据 ...（后面更新）

发送请求

请求发送可 通过 send() 方法直接发送

//get请求
xmlHttp.send();
//post请求
xmlHttp.open("post","testPost",true);
// 增加time随机参数，防⽌读取缓存
// 向请求添加 HTTP 头，POST如果有数据一定加！！！！
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var urlInfo = "name='张三'&age=23" ;
xmlHttp.send(urlInfo);

JQ实现Ajax请求

ajax()

$.ajax( [settings]); settings参数列表，用于配置 Ajax 请求的键值对集合

settings属性	类型 [默认值]	说明
url	String	请求地址
async	Boolean [true]	是否启动异步请求
data	JSON/String	发送到服务器的数据
type	<请求类型>	GET/PSOT
dataType	String	预期的返回数据的类型 xml/html/script/json...
success	function()	请求成功后的回调函数
error	function()	请求失败时调用此函数

$.ajax({
    url: "/textChange",
    type: "post",
    data: {"name": "张三", "password": "123123"},
    dataType: "text",
    //指定 标签p 进行响应测试
    success: function (rs) {
        $("p").html(rs);
    },
    error: function (rs) {
        $("p").html(rs);
    }
});

get()

==$.get(url , data , function(result) {});==

 $.get("textChange", "name=张三&password=123123", function (result) {
     $("p").html(result);
 });

post()

==$.post(url , data , function(result){});==

 $.post("textChange", "name=张三&password=123123", function (result) {
     $("p").html(result);
 });