详解-jQuery中的AJAX

7.jQuery中的AJAX

1. 体验AJAX

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查看手机归属地</title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form >
			手机号码:<input type="text" id="phone"  />
			<br><button type="button">查找</button>
		</form>
		<hr>
		<div>
			<p>你的手机归属地：<span></span></p>
		</div>
		<script>
		$(":button").click(function(){
			var phone = $("#phone").val();
			$.ajax({
				url:"https://api.asilu.com/phone/",
				data:{"phone":phone},
				dataType: "jsonp",
				success:function(rs){
					$("div span").text(rs.province+"省"+rs.city+"市,  运营商："+rs.sp)
				}
			})
		})
		</script>
	</body>
</html>

2. 原生AJAX概念

AJAX 全称为"Asynchronous JavaScript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的开发技术。

基于web2.0标准，使用XMLHttpRequest进行异步数据交互。

传统的 Web 应用中，用户对页面中的表单进行填写，提交表单后向 Web 服务器发送一个请求，服务器接收此请求并处理其中的表单，返回一个新的网页。

AJAX的优势

1.无刷新与服务器端进行通信，

2.页面局部刷新

优秀的用户体验，提高 Web 程序的性能，减轻服务器和带宽的负担

AJAX 的不足

破坏浏览器"前进"、"后退"按钮的正常功能

对搜索引擎的支持不足（SEO）

跨域问题

2.1 前置基础：

1. 动态DOM操作

2. xml|json

3.http

是一个通信协议

两部份（请求&响应）

请求报文：（4部份组成)

3 次请求

已传输3.3 kB

99.8 kB 条资源

完成：30 ms

DOMContentLoaded：72 ms

加载：70 ms

标头

负载

预览

响应

发起程序

计时

常规
响应头 (11)
请求标头已分析视图

ini 复制代码

请求行：method(请求方法,如：get|post)   url(请求地址,如:/s?ie=utf-8)   protocol（协议,如HTTP/1.1)

请求头: 主机，如：(Host：baidu.com)
		客户端数据，如：(Cookie：userName=mach)
		请求内容类型，如:（Content-type:appliction/x-www-form-urlencoded)
		引擎标识,如:(User-Agent：Chrome 107）
		
空行：

请求体:  如果是get这里是空的，post是有请求参数的，如:（"userName=admin&password=888)

响应报文：（4部份组成)

xml 复制代码

响应行：scheme（协议,如HTTP/1.1)   响应状态码（如：200）   响应状态文本（如：OK)

响应头: 
		Content-type:text/html; charset=utf-8
		Content-length:1024
		
		
空行：

响应体: 这里是响应内容如：<html>
							<head>...</head>
							<body>
							<p>这是一个页面
							</body>
					</html>

2.2 原生AJAX,上代码

准备两个文件

1.TestServer.html

说明：这个AJAX请求的服务器页面，响应的页面类型为text/html；内容如下：

html 复制代码

<span>test</span>

2.index.html

说明：这个是主页面，单击"显示"按钮时发生异步请求：

效果1：请求前

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

效果2：请求后：

关键代码：

html 复制代码

<button>显示</button>    
<h3>下是请求的内容：</h3>
<div></div>

<script>    
    window.onload = function () {
        document.querySelector("button").onclick=function () {
            // 创建XMLHttpRequest对象
            var xhr =   new XMLHttpRequest();
            // 与服务器建立连接TestServer
            xhr.open("get", "TestServer.html", true);
            // 发送异步请求
            xhr.send();
            // 设置请求状态变化执行的回调函数
            xhr.onreadystatechange = function(){
                //如果请求完成且响应成功
		        if(xhr.readyState==4  &&  xhr.status==200){
                    let div = document.querySelector("div");
                    div.innerHTML += "<br>响应状态码:"+xhr.status;//状码码
                    div.innerHTML += "<hr><br>响应状态文本:"+xhr.statusText;		
                    div.innerHTML += "<hr><br>所有响应头:"+xhr.getAllResponseHeaders();		
                    div.innerHTML += "<hr><br>响应体的HTML字符串:"+xhr.response;

                }
            };                   
        };
    };

</script>

2.3 使用步骤（4步）

1.创建XMLHttpRequest异步请求

参见上面代码中的createXMLHttpReq()函数。因为兼容问题，不同浏览器，甚至版本不同创建方法不一样。

javascript 复制代码

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

2.与服务器建立连接

先简单了解http连接：HTTP是超文本传输协议，其定义了客户端与服务器端之间文本传输的规范。HTTP默认使用80端口，这个端口指的是服务端的端口，而客户端使用的端口是动态分配的。当我们没有指定端口访问时，浏览器会默认帮我们添加80端口。我们也可以自己指定访问端口如：www.baidu.com:80。需要注意的是，现在大多数访问都使用了HTTPS协议，而HTTPS的默认端口为443，如果使用80端口访问HTTPS协议的服务器可能会被拒绝。

在搞清楚建立与服务器的连接问题时，我们必须清楚两个重要的基础：

1.请求的方法:

建立http请求的方法有8种，常用的是get和post两种。详细参考：www.cnblogs.com/weibanggang...

2.请求的服务器URL

指的请求的服务器资源，可是一个静态html文件，也要可以是有处理请求和响应能力的动态Servlet或JSP等后端服务器程序。

一个请求报文由请求行、请求头部、空行和请求数据4部分组成。

参考代码：

javascript 复制代码

xhr.open("get", "TestServer.html", true);

3.向服务器发送数据

javascript 复制代码

 xhr.send();

先了解http请求｜响应的步骤：

客户端连接到Web服务器->发送Http请求->服务器接受请求并返回HTTP响应->释放连接TCP连接->客户端浏览器解析HTML内容

其实向服务器发送数据很简单，调用XMLHttpRequest对象的send()方法就好了。但我们必须还要了解发送请求时发送了什么内容，服务响应回来的数据有什么内容。

发送HTTP请求

通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。

服务器接受请求并返回HTTP响应

Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。

下面的图例是如何使用chrom浏览器查看请求与响应的报文信息，注意：

1.圈起的地方，这是我们要查看的请求行，请求行，响应行和响应头信息。

2.箭头指向的地方是你要按下F12打开代码调试检查窗口后要单击的位置，这样你才能看到请求和响应信息。

3.重点要注意，你必须打开调试检查窗口后，再刷新页，才可以看到右边的内容。

4.在回调函数中针对不同的响应状态进行处理

很明显示，最后是根据请求状态码和响应状态码来处理最后响应回的数据了：

javascript 复制代码

xhr.onreadystatechange = function(){
    //如果请求完成且响应成功
	if(xhr.readyState==4  &&  xhr.status==200){
        let div = document.querySelector("div");
        div.innerHTML += "<br>响应状态码:"+xhr.status;//状码码
        div.innerHTML += "<hr><br>响应状态文本:"+xhr.statusText;		
        div.innerHTML += "<hr><br>所有响应头:"+xhr.getAllResponseHeaders();		
        div.innerHTML += "<hr><br>响应体的HTML字符串:"+xhr.response;

    }
};

ajax请求对象中的onreadychange事件，是指当异常请求对象的readystatus状态发生改变时引发的事件。

readystatus指的是请求过程中，会有5种装状态，分别是从0到4,他们的含义分别是：

0 :请求未初始化； 1：服务器连接已建立； 2：请求已接收； 3：请求处理中； 4：请求已完成，且响应就绪；

HTTP 响应状态码用来表明特定 HTTP 请求是否成功完成。响应被归为以下五大类：

信息响应 (100--199)
成功响应 (200--299)
重定向消息 (300--399)
客户端错误响应 (400--499)
服务端错误响应 (500--599)

developer.mozilla.org/zh-CN/docs/...

2.4 常用属性和方法

`open(method,url,async)` ：

规定请求的类型、URL 以及是否异步处理请求。

1.method：请求的类型；GET 或 POST

2.url：文件在服务器上的位置

3.async：true（异步）或 false（同步）

`send(string)` ：

将请求发送到服务器。

string：仅用于 POST 请求，表示传递的参数，格式为 key1=val1&key2=val2 的查询字符串

`setRequestHeader(header,value)`：

向请求添加 HTTP 头。

header: 规定头的名称 value: 规定头的值

`onreadystatechange`：

是一个异步对象的事件绑定，只有当请求状态发生改变时，调用此方法

回调函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

`readyState`：

存有 XMLHttpRequest 的状态。

从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收3: 请求处理中 4: 请求已完成，且响应已就绪

`Status`：

服务器端响应的状态码，例如 200 表示成功，404 表示未找到页面

response

响应体

`responseText`:

.就绪处理程序确定 readyState 为已完成并且请求已成功地完成后，就可以从请求对象中获取响应内容。

参考：

XMLHttpRequest: developer.mozilla.org/zh-CN/docs/...

AJAX四种常见请求头与响应类型：

www.cnblogs.com/itjeff/p/10...

blog.csdn.net/baichoufei9...

blog.csdn.net/u012894692/...

2.5 如何传参

分get和post两种

get,在URL后拼接参数， login?userName=admin&password=888
post,在异步请求对象的send()方法中加参数， xhr.send("userName=admin&password=888")

<<<<<<< HEAD jquery表单序列化：$("form").serialize() | new FormData(表单域)

URI编码：encodeURIComponent(url)

URI反编码：decodeURIComponent(url)

关于请求参数的头

application/x-www-form-urlencoded：默认的表单提交
multipart/form-data： FormData类型，适用post提交和上传
application/json：json格式的参数
text/plain ：纯文本格式

请求头的类型不同（Content-Type)，服务端如何接收参数（请求体）

application/x-www-form-urlencoded:

ini 复制代码

String  value = request.getParameter("参数名");
String[]   values = request.getParemeterValues("参数名");

multipart/form-data:

文本同上一样

二进制：

ini 复制代码

Part part = request.getPart("参数名");

text/plain:

ini 复制代码

BufferedReader in =  request.getReader();
while (in.ready()){
    p += in.readLine()+"<br>";
}

7.如何设置请求头

=======

2.6 如何设置请求头

setRequestHeader(请求头关键字，请求头值)

2.7 如何处理响应结果

一般情况下，服务器响应用户一个json对象，而不是一个String字符串

后端服务如何返回一个json对象

ini 复制代码

PrintWriter out = response.getWriter();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
out.print(employeeJsonString);
out.flush();

前端客户如何处理这个一个json对象

1.手动转换

JSON.parse()

2.自动转换

xhr.responseType()

9.JSON

1.什么是JSON

2.JSON语法

3.JavaScript如何使用

<<<<<<< HEAD

2.8 跨域

什么是跨域

同源策略

566384456a94a59d81597c5188c96dee19a33fc0

4.java如何使用

10.同源策略

违背同源策略就是跨域

跨域解决：

1.jsonp，只接收get请求

html本身就具有跨域能力：img,link,iframe, script

2.后端服务Servlet实现允许跨域（写后端的过滤器）

java 复制代码

//允许所有的域名
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Credentials","*");
response.setHeader("Access-Control-Allow-Methods","*");
response.setHeader("Access-Control-Max-Age","3600");
response.setHeader("Access-Control-Allow-Headers","Authorization,Origin,X-Requested-With,Content-Type,Accept,content-Type,origin,x-requested-with,content-type,accept,authorization,token,id,X-Custom-Header,X-Cookie,Connection,User-Agent,Cookie,*");
response.setHeader("Access-Control-Request-Headers","Authorization,Origin,X-Requested-With,content-Type,Accept");
response.setHeader("Access-Control-Expose-Header","*");

有什么作用？写在那里？

3. jQuery中请求参数相关工具函数

serialize()：

将表单元素的值拼接为可提交的参数字符串(表单参数查询字符串)。

结果示例："userName=zhangsan&age=18"。用法：

javascript 复制代码

$(表单元素选择器).serialize()

注意：

1.序列化中是不包含表单元素中的文件域对象

2.如果有中文，结果示例：userName=%E5%BC%A0%E4%B8%89&userpwd=bb

为什么会有一串串%xx这类的符号，是因为在将name和value拼接后再进行了URI编码。

URL编码：

为什么要进行编码:

表单提交参数中有些特殊的字符需要传入服务器，如提交的值中有"&"这个符号，&刚好又有参数组分隔符，此时就会将值中的&转为%25就可以了。这个转码过程就是URL编码，使用"encodeURI()"。编码的反操作是解码，使用"decodeURI()".

用法：

javascript 复制代码

encodeURI("name=张三&age=19")//"name=%E5%BC%A0%E4%B8%89&age=19"
decodeURI("name=%E5%BC%A0%E4%B8%89&age=19")//"name=张三&age=19"

serializeArray()：

将表单元素的值编译成有name和value的json对象。这个对象同样可以作为请求的参数

结果示例：

javascript 复制代码

[
{name:"userName",value:"zhangsan"},
{name:"age",value:"18"}
]

用法：

javascript 复制代码

$(表单元素选择器).serializeArray();

注意：

serialize()返回的是字符串（String），是一个简单的表单提交参数字符串，这种字符串即适用于Ajax请求的提交参数，也适用于URL地址后查询字符串（xx.html?xxx）。

serializeArray()返回的Json数组对象(Object数组),每个元素都包含name和value。适用于Ajax请求的提交参数

$.param()

将数组或对象拼接为表单提交参数字符串，并且进行URL编码。

用法：

javascript 复制代码

$.param({name:"zhang",hobby:[0,2]})//"name=zhang&hobby%5B%5D=0&hobby%5B%5D=2"

也可以理解为：

javascript 复制代码

$("form").serialize();
等效代码
$.param($("form").serializeArray())

案例1

下面表单包含：文本框，单选按钮，多选按钮，下拉框

html 复制代码

<form>
        <input type="text" name="userName">
        <br>
        <label><input type="radio" name="sex" value="0">男</label>
        <label><input type="radio" name="sex" value="1">女</label>
        <br>
        <label><input type="checkbox" name="hobby" value="0">读书</label>
        <label><input type="checkbox" name="hobby" value="1">游戏</label>
       	<label><input type="checkbox" name="hobby" value="2">运动</label>
        <br>
        <select name="education" >
            <option value="0">大专</option>
            <option value="1">本科</option>
            <option value="2">硕士</option>
        </select>
        <br>
        <button type="button">确定</button>
    </form>

输入数据后在控制台看看结果：

4. jQuery中AJAX请求

load()

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。

**注意：**还存在一个名为 load 的 jQuery事件方法。调用哪个，取决于参数。

语法：

css 复制代码

$(selector).load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

url:类型: String,一个包含发送请求的URL字符串 data:类型: PlainObject, String,向服务器发送请求的Key/value参数，例如{name:"zhangsan",age:23} complete(responseText, textStatus, XMLHttpRequest):类型: Function(),当请求·完成·后执行的回调函数。 responseText- 包含来自请求的结果数据 textStatus- 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） XMLHttpRequest- 包含 XMLHttpRequest 对象

<math xmlns="http://www.w3.org/1998/Math/MathML"> . g e t ( ) ∣ .get()| </math>.get()∣.post()

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

语法：

javascript 复制代码

$.get(url[,param][,success(responseData,textStatus,jqXhr)][,dataType])
$.post(url[,param][,success(responseData,textStatus,jqXhr)][,dataType])
[{"id":1,"userName":"张三","age":18},{"id":2,"userName":"李四","age":18},{"id":3,"userName":"王五","age":18}]

url:类型: String,一个包含发送请求的URL字符串 param:类型: PlainObject, String,发送给服务器的字符串或Key/value键值对。 responseData:响应体 success(data, textStatus, jqXHR):类型: Function(),当请求成功后执行的回调函数。 dataType:类型: String,从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）

jqXhr

是XMLHttpRequest对象超集。是jQuery 自己的 XMLHttpRequest 对象(一般简称jqXHR)。

jqXhr是XMLHttpRequest和Deferred两个对象组合体。 jQuery中Deferred后面再谈。

参考：

www.cnblogs.com/czf-zone/p/...

www.ruanyifeng.com/blog/2011/0...

$.ajax()

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get(), $.post()，$(selector).load() 等。

$.ajax() 在jQuery1.5+之后返回jQueryXMLHttpRequest 对象(jQXhr)。

与常用的 <math xmlns="http://www.w3.org/1998/Math/MathML"> . g e t ( ) , .get(), </math>.get(),.post()相比， $.ajax()用对象参数可以获得更多的灵活性。

语法：

javascript 复制代码

jQuery.ajax( url [, settings ] )
jQuery.ajax( [settings ] )

$.ajax({
    url:"",   
    type:"",    
    success:function(){
        
    }
})

settings见帮助，此处不全部展开，只说明几种常用属性：

url:类型: String，一个用来包含发送请求的URL字符串。

async (默认: true)，类型: Boolean，默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false 。跨域请求和 dataType: "jsonp" 请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。从 jQuery 1.8 开始, jqXHR ($.Deferred)中使用 async: false 已经过时。您必须使用的 success/error/complete 的回调选项代替相应的jqXHR对象的方法，比如jqXHR.done() 或者过时的jqXHR.success()

type (默认: 'GET')，类型: String，请求方式 ("POST" 或 "GET")，默认为 "GET"。**注意:**其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

contentType (默认: 'application/x-www-form-urlencoded; charset=UTF-8')，类型: String，发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded; charset=UTF-8"，适合大多数情况。如果你明确地传递了一个内容类型（Content-Type）给 $.ajax()，那么他必定会发送给服务器（即使没有数据要发送）。数据将总是使用UTF-8字符集传递给服务器；你必须在服务器端进行适当的解码。

data ，类型: [Object, String](www.jquery123.com/Types/#Obje..., String)，发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。查看 processData 选项说明，以禁止此自动转换。对象必须为"{键:值}"格式。如果这个参数是一个数组，jQuery会按照traditional 参数的值，将自动转化为一个同名的多值查询字符串(查看下面的说明)。注：如 {foo:["bar1", "bar2"]} 转换为 'foo=bar1&foo=bar2'。

dataType (默认: Intelligent Guess (xml, json, script, or html))，类型: String，预期服务器返回的数据类型。

complete ，类型: Function( jqXHR jqXHR, String textStatus )，请求完成后回调函数 (请求success 和 error之后均调用)。这个回调函数得到2个参数： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串("success", "notmodified", "error", "timeout", "abort", 或者 "parsererror") 。从jQuery 1.5开始， complete设置可以接受一个函数的数组。每个函数将被依次调用。这是一个Ajax事件。

error ，类型: Function( jqXHR jqXHR, String textStatus, String errorThrown )，请求失败时调用此函数。有以下三个参数：jqXHR (在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串和捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "abort" ，和 "parsererror"。当一个HTTP错误发生时，errorThrown 接收HTTP状态的文本部分，比如： "Not Found"（没有找到）或者 "Internal Server Error."（服务器内部错误）。 从jQuery 1.5开始 , 在error设置可以接受函数组成的数组。每个函数将被依次调用。 **注意：**此处理程序在跨域脚本和JSONP形式的请求时不被调用。这是一个 Ajax Event。

success ，类型: Function( Object data, String textStatus, jqXHR jqXHR )，请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x前为XMLHttpRequest）对象。在jQuery 1.5， *成功设置可以接受一个函数数组。每个函数将被依次调用。*这是一个 Ajax Event

5. 其它

$.ajaxSetup()

为以后要用到的Ajax请求设置默认的值。

$.parseJSON()

接受一个标准格式的 JSON 字符串，返回解析后的Object 对象。

如：

javascript 复制代码

var obj = $.parseJSON('{"name":"zhangsan","age":18}');
console.log(obj);

等效代码

javascript 复制代码

var obj = eval({"name":"zhangsan","age":18});

等效代码

javascript 复制代码

var obj =JSON.parse('{"name":"zhangsan","age":18}');

反操作：

javascript 复制代码

var str = JSON.stringify(obj)

案例2：

请求的目标文件：rs.json

json 复制代码

{
    "name":"zhangsan",
    "age":18,
    "sex":"男"
}

源文件的html结构：要求,单击"显示"按钮，将数据显示到
中，且设置class为block。

html 复制代码

<style>
    .block{
        width: 200px;
        border: 1px solid red;
    }
</style>
<script src="../js/jquery/jquery1.9.js"></script>
<button>显示</button>
<div></div>

方法一：

javascript 复制代码

$("button").on("click",function(){
    //jquery.ajax()请求
    $.ajax({
        url:"rs.json",
        success:function(data){
            $("div").addClass("block")
                    .append("<p>姓名："+data.name+"</p>")
                    .append("<p>性别："+data.sex+"</p>")
                    .append("<p>年龄："+data.age+"</p>");
        }
    });
})

方法二：

javascript 复制代码

//设置ajax请求
$.ajaxSetup({
    url:"rs.json",                
    success:function(data){
        $("div").addClass("block")
                .append("<p>姓名："+data.name+"</p>")
                .append("<p>性别："+data.sex+"</p>")
                .append("<p>年龄："+data.age+"</p>");
    }
});
$("button").on("click",function(){
	//提交请求
	$.ajax();
})

方法三：

javascript 复制代码

//设置ajax请求
$.ajaxSetup({
    url:"rs.json",
    type:"get",
    dataType:"json" 
});
//单击按钮时： 提交请求
$("button").on("click",function(){               
	$.ajax();
})
//请求成功后的执行的事件
$("div").ajaxSuccess(function(event,xhr,settings){
    let data = $.parseJSON(xhr.responseText);
    $(this).addClass("block")
        .append("<p>姓名："+data.name+"</p>")
        .append("<p>性别："+data.sex+"</p>")
        .append("<p>年龄："+data.age+"</p>");
    
});

$.getJSON():

使用一个HTTP GET请求从服务器加载JSON编码的数据。

用法：

javascript 复制代码

$.getJSON(url,data,success(data,textStatus,jqXHR));

等效代码：

javascript 复制代码

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

6. jQuery的deferred对象详解

在jQuery中ajax操作的帮助文档有一个jqXhr对象的讲解：

通过上面的描述及其它文档中过滤出几个关键字：

1.$.get(),$.post()和$.ajax()都返回一个jQuery自己定义jQxhr对象。

2.jQXhr对象是原生JavaScript中的XMLHttpRequest对象实现Promise接口。

3.jQuery中Deferred是实现Promise接口的对象。

Promise接口这里不详细讲解，只做基本基本讲解。

什么是Promise？

ECMAscript 6 原生提供了 Promise 对象。

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

什么是Deferred对象？

引入：在开发过程中，经常会遇到一些耗时很长的操作，这其中有异步操作也有同步操作，我们需要有结束后做一些其它操作。如：发送一个ajax请求，并获取响应的文本添加指定位置。

通常的做法是，写一个回调函数（callback)。即事件处理，一旦他们完成，应用调用哪个或哪些函数。

Deferred对象比回调函数提供了更灵活的方式。

下面以jQuery中ajax操作为例

Deferred对象优点：

再看看案例2中，传统ajax写法：

javascript 复制代码

$.ajax({
    url:"rs.json",
    success:function(data){
        $("div").addClass("block")
                .append("<p>姓名："+data.name+"</p>")
                .append("<p>性别："+data.sex+"</p>")
                .append("<p>年龄："+data.age+"</p>");
    },
    error:function(){
        alert("请求失败了！");
    }
});

1.让ajax请求有了优雅的链式写法

javascript 复制代码

$.ajax("rs.json")
    .done(function (data) {
        $("div").addClass("block")
            .append("<p>姓名：" + data.name + "</p>")
            .append("<p>性别：" + data.sex + "</p>")
            .append("<p>年龄：" + data.age + "</p>");
    })
    .fail(function () {
        alert("请求失败了！");
    })

done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。

2.让ajax请求可以轻松的为同一操作指定多个回调

Deferred对象还有一个好处就是可以自由添加多个回调函数，如果上面案例中我们操作成功后，还要执行另一个回调函数这就简单多了。

javaScript 复制代码

$.ajax("rs.json")
    .done(function (data) {
        $("div").addClass("block")
            .append("<p>姓名：" + data.name + "</p>")
            .append("<p>性别：" + data.sex + "</p>")
            .append("<p>年龄：" + data.age + "</p>");
    })
    .fail(function () {
        alert("请求失败了！");
    })
    .done(function(){
        alert("执行成功了！")
    })

总结：

vascript .ajax("rs.json") .done(function (data) { ("div").addClass("block") .append("

姓名：" + data.name + "
") .append("

性别：" + data.sex + "
") .append("

年龄：" + data.age + "
"); }) .fail(function () { alert("请求失败了！"); })

less 复制代码

[done()](http://api.jquery.com/deferred.done/)相当于success方法，[fail()](http://api.jquery.com/deferred.fail/)相当于error方法。采用链式写法以后，代码的可读性大大提高。

###### 2.让ajax请求可以轻松的为同一操作指定多个回调

Deferred对象还有一个好处就是可以自由添加多个回调函数，如果上面案例中我们操作成功后，还要执行另一个回调函数这就简单多了。

```javaScript
$.ajax("rs.json")
    .done(function (data) {
        $("div").addClass("block")
            .append("<p>姓名：" + data.name + "</p>")
            .append("<p>性别：" + data.sex + "</p>")
            .append("<p>年龄：" + data.age + "</p>");
    })
    .fail(function () {
        alert("请求失败了！");
    })
    .done(function(){
        alert("执行成功了！")
    })

总结：

实际Derferred对象是传统回调函数写法的替代品。

详解-jQuery中的AJAX

7.jQuery中的AJAX

1. 体验AJAX

2. 原生AJAX概念

2.1 前置基础：

2.2 原生AJAX,上代码

2.3 使用步骤（4步）

1.创建XMLHttpRequest异步请求

2.与服务器建立连接

3.向服务器发送数据

4.在回调函数中针对不同的响应状态进行处理

2.4 常用属性和方法

open(method,url,async) ：

send(string) ：

setRequestHeader(header,value)：

onreadystatechange：

readyState：

Status：

responseText:

2.5 如何传参

7.如何设置请求头

2.6 如何设置请求头

2.7 如何处理响应结果

9.JSON

<<<<<<< HEAD

2.8 跨域

10.同源策略

1.jsonp，只接收get请求

2.后端服务Servlet实现允许跨域 （写后端的过滤器）

3. jQuery中请求参数相关工具函数

serialize()：

URL编码：

serializeArray()：

$.param()

案例1

4. jQuery中AJAX请求

load()

<math xmlns="http://www.w3.org/1998/Math/MathML"> . g e t ( ) ∣ .get()| </math>.get()∣.post()

jqXhr

$.ajax()

5. 其它

$.ajaxSetup()

$.parseJSON()

案例2：

$.getJSON():

6. jQuery的deferred对象详解

什么是Deferred对象？

Deferred对象优点：

1.让ajax请求有了优雅的链式写法

2.让ajax请求可以轻松的为同一操作指定多个回调

`open(method,url,async)` ：

`send(string)` ：

`setRequestHeader(header,value)`：

`onreadystatechange`：

`readyState`：

`Status`：

`responseText`:

2.后端服务Servlet实现允许跨域（写后端的过滤器）