AJAX

Ajax

异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
浏览器提供的API，通过js直接发送网络请求
遵循http协议

原生ajax

• 一、创建xmlHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

var xhr = new XMLHttpRequest()
Var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);老版本IE5 和 IE6使用 ActiveX 对象

• 二、onreadystatechange 状态改变，触发函数

一定要在发送请求之前注册函数，保证函数一定触发
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
使用 callback 函数

• 1、readyState四个阶段五个状态
  (0创建－1初始化请求，发送请求－2接收数据－3解析数据－4完成)
  0: 请求未初始化，(XMLHttpRequest)对象已经创建
  1: 服务器连接已建立，对XMLHttpRequest对象进行初始化，即调用open()方法，并调用send()方法开始向服务端发送请求。
  2: 请求已接收，send()方法执行完成，已经接收服务器端响应报文的响应头数据xhr.getAllResponseHeaders()，还没拿到响应体
  3: 请求处理中，正在下载响应体
  4: 请求已完成，已经接收完响应体responseBody、responseText（字符串形式）或responseXML（XML）

• 2、status

1) 201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。
200：请求成功（后台处理结果ok）
2) 300-3007表示的意思是：要完成请求，需要进一步进行操作
303：重定向
304：未修改，如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
3) 4XX-HTTP状态码表示请求可能出错
400：请求错误、401：未授权、403：禁止访问、404：文件未找到
4) 500-505：服务器在尝试处理请求时发生内部错误
500：服务器内部错误
505：服务端错误，服务器不支持，或者拒绝支持在请求中使用的 HTTP 版本。

• 3、获取响应信息

状态码status-200
状态描述statusText-OK

响应头信息
指定响应头getResponseHeader(‘Content-Type’)-text/plain
全部响应头getAllResponseHeaders()

设置获取到的响应体类型responseType=”“
默认为空，相当于text
Json：IE10及以上兼容，所以直接采用原始方式json.parse(this.responseText)
arraybuffer/blob：接收二进制数据类型
document：接收一段html

响应体信息
response、responseText（字符串形式）或responseXML（XML形式）
区别：
response获取到的结果根据responseType变化，可以获取到不同类型的响应体
responseText获取到的永远为字符串类型的响应体

HTML5提供的新api
xhr.onload = function(){this.readyStatus/this.responseText}相当于onreadystatechange 中readyStatus=4的状态，已接收完响应体

• 三、设置请求报文

• 请求行
  xhr.open(method,url,async)
  open()参数设置
  1.method:get/post
  GET 更简单也更快，并且在大部分情况下都能用。
  在以下情况中，请使用 POST 请求：
  1) 无法使用缓存文件（更新服务器上的文件或数据库）
  2) 向服务器发送大量数据（POST 没有数据量限制）
  3) 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
  2.url发送任意类型文件
  3.aysnc:true(异步)/false(同步)
  XMLHttpRequest 对象用于 AJAX 的话，其 open() 方法的最好设置为异步
  1) 当是异步时，浏览器把请求发送后就继续做自己的事，当onreadystatechange事件到来时说明服务端的数据来了，这时再处理数据。类似于一个节点绑定点击事件后就做后面的事，当用户点击了再执行绑定的处理函数。
  2) 当是同步时，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。 当使用 async=false 时，不用编写 onreadystatechange 函数，把代码放到 send() 语句后面即可.

• 请求头
  xhr.setRequestHeader(header,value) 用于POST 数据，添加 HTTP 头
  ‘Content-Type’,’application/x-www-form-urlencoded’便于服务器端接收数据

• 请求体
  xhr.send(string)仅用于 POST 请求，传递需要提交到服务器的参数’key1=value1&&key2=value2’

模板引擎

使用模板引擎art-template处理数据

封装ajax

传递参数的形式如果为object，要转换
判断get/post时，字符的大小写问题
get/post传递参数的处理方法不同
为post方法添加请求头
onreadystatechange函数（异步）中，使用回调函数实现委托机制

jQuery Ajax

$.ajax() 全局事件$(document)
.ajaxStart(function(e){}) ajax请求发生执行
.ajaxStop(function(e){}) ajax请求结束就开始执行
.ajaxSuccess(function(e,xhr,xhrOptions){}) ajax请求成功执行
.ajaxError(function(e,xhr,xhrOptions){}) ajax请求失败执行
.ajaxComplete(function(e,xhr,xhrOptions){}) ajax请求完成执行

底层接口，基于XMLHttpRequest
$.ajax({
url: ‘/example/jquery/demo_test.asp’,
type: ‘post’, 默认为get
data: { id:1 }, 设置请求参数，get为url里面的参数，post为请求体里面的参数
dataType: ‘json’, 设置响应体类型，不指定时，默认和responseType相同
beforeSend: function(xhr,o) { 所有发送请求操作之前，即open前，执行的函数
console.log(xhr); //readyState=0
}
success: function(responseTxt,statusTxt,xhr) { 只有请求成功才会执行status:200
console.log(responseTxt); //readyState=4
}
error: function(xhr,statusTxt) { 只有请求不正常才会执行status!==200
console.log(xhr); //readyState=4
}
complete: function(xhr,statusTxt) { 无论请求成功还是失败都会执行
console.log(xhr); //readyState=4
}
});

$.get()、$.post()、$.getJSON() 基于$.ajax()
函数第一个参数为responseText，第二个参数为status，有两个值success/error
$.get(‘url’, { id:1 }, function(responseTxt) { console.log(responseTxt); //请求成功执行 })$.post(‘url’, { id:1 }, function(responseTxt) {
console.log(responseTxt);
})
$.getJSON(‘url’, { id:1 }, function(responseTxt) {
console.log(responseTxt);
})

jQuery load()
$(selector).load(URL,data,callback); 可以把 jQuery 选择器添加到 URL 参数 ”url #p1” Callback三个参数$(“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“外部内容加载成功！”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});

同源策略
同源：协议、域名、端口完全相同
https://www.baidu.com/
协议https
域名www.baidu.com
端口https默认为443，http默认为80

同源策略：不同源地址之间默认不能发送ajax请求

尝试进行跨域请求
Img link 可以发送不同源之间的请求，但是不能拿到响应结果
script iframe

JSONP
JSON with Padding
跨域请求
原理：
通过script标签请求一个服务端的PHP文件
返回结果为一段JS，作用在于调用我们事先定义的函数
从而将服务端想发送给客户端的数据发送给客户端

$.ajax中设置dataType:’jsonp’接收json格式数据
jsonp:’successCallback’,
jsonpcallback:’successCallback’自定义的json回调名称，默认为jquery自动生成的随机函数名
此时，服务器需指定
Response.ContentType=”text/html; charset=utf-8”;
String callback = Request.QueryString[“successCallback”].ToString();
Response.Write(callback + “{ \”success\”: [{ \”id\”: 1, \”title\”: \”title 1\” }, { \”id\”: 2, \”title\”: \”title 2\” }, { \”id\”: 3, \”title\”: \”title 3\”}] }”);

AJAX跨域（CORS）cross Origin Resorce Share
在服务端允许跨域
Header(‘Content-Type’,’Access-Control-Allow-Origin:*’ )

$.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?
jsoncallback=?”, function(data){
$.each(data.items, function(i,item){

});
});