一、同步交互异步交互
1、什么是同步交互
指发送一个请求，需要等待返回，然后才能发送下一个请求
2、什么是异步交互
指发送一个请求，不需要等待返回，随时可以再发送 下一个请求
同步交互与异步交互的区别在于：
同步交互需要等待结果，而异步交互不需要等待结果
3、异步交互的优势
- 用户操作无须像同步交互必须等待结果。
- 异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新。
- 异步交互对带宽造成的压力相比同步交互更小。
- 通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现。
4、异步交互的劣势
- 异步交互破坏了浏览器原有的前进和后退机制。
- 如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题。
- Ajax实现异步交互对搜索引擎支持较弱。
- Ajax实现异步交互会引起一些Web安全问题， 例如SQL注入攻击、跨站点脚本攻击等问题。
二、Ajax是什么
Ajax是Asynchronous JavaScript XML的缩写，被译为异步JavaScript和XML
Ajax并不是一个新技术，而是一个在2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技
术集合的“新”方法。
当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)
整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。
尽管Ajax中的“X”代表XML,但由于、JSON的许多优势，目前JSON的使用比XML更加普遍。
JSON和XML都被用于在Ajax模型中封装数据。
1、AJax涉及的技术
- HTML
- CSS
- JavaScript
- DOM
- XML
- XMLHTTPRequest对象
XMLHTTPRequest对象是实现Ajax异步交互的核心
2、Ajax的工作原理
3、Ajax的核心对象
3.1、实现Ajax异步交互的核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。
3.2、XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
3.3、XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。 如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMLHttp.Request对象可以得到所有类型的数据资源，并不局限于XML格式的数据。
三、实现Ajax异步交互
1、实现Ajax的执行步骤
1.1、创建Ajax的核心对象XMLHttpRequest对象
function createXMLHttpRequest() {
var httpRequest;
if (window.XMLHttpRequest) { // 适用于Chrome, Firefox, Safari,
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { //适用于IE浏览器
try {
httpRequest = new ActiveX0bject("MsxmL2.XMLHTTP"); //IE 7 +
} catch (e) {
try {
httpRequest = new ActiveX0bject("MicrosoftXMLHTTP ") ;// IE 6-
}
catch (e) {}
}
}
return httpRequest;
}
1.2、通过XMLHttpRequest对象的open(方法与服务器端建立连接
1.3、构建请求所需的数据内容，井通过XMLHttpRequest对象的send()方法发送给服务器端
1.4、通过XMLHttpRequ lest对象提供的onreadystatechange事件监听服务器端的通信状态
1.5、接收并处理服务器端向客户端响应的数据结果
1.6、将处理结果更新到HTML页面中
2、具体代码过程
2.1创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
2.2调用XMLHttpRequest对象的open方法
与服务器建立连接
xhr.open('get','http://Localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.htmL?user=zhangwuji&pwd=123456')
/*
open(method,url)方法
method:当前的请求方式GET、POST···
url:当前请求的服务器端地址
*/
2.3调用XMLHttpRequest对象的send方法
将客户端页面数据发送给服务端
xhr.send(null)
/*
send()方法
如果不传递任何数据，向该方法中写null
*/
/*
向服务器端发送请求数据
send(data)方法
参数data -表示要向服务器端发送的请求数据
请求方式：
1、如果当前的请求方式为GET的话- send() 方法中只能传递null值
2、将请求数据添加到请求地址链接中
两种情况
*发送数据- user=zhangwuji&pwd= 123456
*请求数据的格式
1.如果具有多个请求数据的话，之间使用"&"进行分隔
2.每个数据格式-> name=value
*不发送数据- send() 方法中必须传递null值，而不能为空
*/
//人为方式获取当前的数据，构建成指定的数据格式
2.4利用XMLHttpRequest对象的onreadystatechange事件
用于监听服务器的通信状态 - 存在着处理完毕信号
接受服务器返回的处理结果
xhr.onreadystatechange = function(){//监听服务器端的通信状态
/*
XMLHttpRequest 对象的readyState属性
作用：表示服务器端的通信状态
值：
0 未初始化
1 open方法被调用
2 send方法被调用
3 正在响应
4 响应已完毕
*/
if(xhr.readyState === 4){
/*
接受服务器端返回结果
XMLHttpRequest对象的responseText属性
作用：用于接受服务器端的响应结果
*/
console.log(xhr.responseText);
}
}
四、GET和POST请求方式
GET请求方式
Ajax异步交互使用GET请求的话：
- 将构建的请求数据添加到open方法中的url地址中
- 将发送请求数据的send方法中的参数设置为null
/*
send()方法
如果是GET，send方法只能传递null 请求数据添加到请求地址中
如果是POST，send方法传递请求数据
*/
POST请求方式
Ajax异步交互使用POST请求的话：
调用send方法之前，需要通过XMLHttpRequest对象的setRequestHeader方法设置请求头信息
1、httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2、通过XMLHttpRequest对象的send方法请求数据
