AJAX （GET请求/POST请求 /同步异步）
AJAX（Asynchronous JavaScript and XML），异步的JavaScript与XML技术。
AJAX是浏览器提供的一套API 可以通过Javascript调用 ，从而实现通过代码控制请求与响应，实现网络编程。
在浏览器端进行网络编程（发送请求，接受响应）的技术方案，可以让我们无需重新加载页面，通过javascript 直接获取服务器端的最新内容。
注意：涉及到AJAX “不能” 以文件协议的方式打开
步骤：
// 1.创建对象 安装浏览器（用户代理）var xhr = new XMLHttpRequest()//2.建立连接 打开浏览器xhr.open('GET','http://learn.php')//3.发送请求xhr.send()指定事件处理函数//4.等待响应//5.结果
注意：XMLHttpRequest 在IE5/6中不兼容
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
注意：
当readyState ===4 等于 xhr.onload （有兼容性。XMLHttpRequest2.0有的）
3.发送请求后，指定事件处理函数，接受响应
//由于服务器响应需要时间，所以是无法通过返回值的方式 返回响应的数据var response = xhr.send（）//客户端无法知道服务器什么时候才能返回响应，所以AJax API采用事件机制让服务器返回响应后通知我们响应已经结束了xhr.addEventListener("readystatechange",function(){//console.log(this.readyState);if(this.readyState !=) 4 returnconsole.log(this.resposeText)},false);
readystatechange 事件状态改变时就触发。
readyState 有五个状态（ 0 1 2 3 4 ）：
UNSET 对象被创建
OPENED open方法被调用，建立连接
HEADS_RECEIVED 已经接受到响应报文的响应头
LOADING 正在下载响应报文的响应体
DONE 整个响应报文已经接受
XMLHttpRequest 遵循HTTP协议
GET请求
一般不需要设置请求体
POST请求
需要设置请求头请求体，请求头的Content-type 要与请求体的数据格式一致
表单提交数据一般是form-date ，当为Request Rayload 说明请求头与请求体的数据格式不一致
xhr.open('POST',/date.php) //设置请求行xhr.setRequestHeader('FO') //设置请求头内容xhr.send({"vauel"：1}) //设置请求体内容 ， 表单提交数据一般 Form-datexhr.onreadystate= function (){if(this.readyState ===4) {console.log(this.status); //获取响应状态码console.log(this.statusText) //获取响应状态描述console.log(this.getAllResponseHeaders) //获取全部响应头console.log(this.getResponseHeader('Content-type')) //获取特定格式的响应头console.log(this.responseText) //获取响应体console.log(this.responseXML) //获取xml格式的响应体}}
响应类型：
this.response : 获取的数据会根据 this.responseType 变化 （二进制数据 ，html5新内容）
this.responseText : 获取的是字符串形式的响应体
客户端、服务器数据传输
1.客户端发送给服务器POST（字符串 send(`username=${username}&password=${password}`)） //GET send(null)
2.服务器接受客户端 $_POST[‘username’] //GET $_GET[‘id’]
- 服务器传给客户端（json 格式 $json = json_encoed( $data echo( $json) )）
- 客户端接收服务器 json格式数据转为数组 var data = JSON.parse(this.responseText)
同步、异步
同步：先吃饭 ，后打电话
异步：边吃饭边听电话
open（）方法
var xhr = new XMLHttpRequest();xhr.open ( , , async) 第三个参数代表异步，布尔型 ，默认为true，false 表示同步，会有线程阻塞
time函数：
查看某一段范围内的代码 执行时间time() 函数console.time（'ajax'） //括号里面可以换成任意字符串代码console.timeEnd（'ajax'）
处理大型服务器响应数据：
art-template 引擎
﹏ヽ暗。殇╰゛Y
￡神魔★判官ぃ
还没有评论，来说两句吧...