Ajax
同步交互是什么
所谓同步交互就是指发一个请求需要等待返回 然后才能发送下一个请求。同步交互相当于排队 ，排到下一个的情况会因为前一个而有所不同
异步交互是什么
所谓异步交互就是指发送一个请求不需要等待返回随时可以在发送下一个请求
异步交互的优势
- 用户操作无需像同步交互必须等待结果
- 异步交互只需要与服务器端交换必要的数据内容，而不是全部更新
- 异步交互对带宽造成的压力相比同步交互更小
- 通过Ajax实现异步交互不需要任何第三方插件，只要在浏览器支持JavaScript语言即可实现
异步交互的劣势
- 异步交互破坏了浏览器原有的前进后退机制
- 如果后面逻辑的执行依靠前面逻辑执行的话异步交互会造成问题
- Ajax实现异步交互对搜索引擎支持较弱
- Ajax实现异步交互会引起一些Web安全问题，例如SQL注入攻击，跨站点脚本攻击等问题
Ajax是什么
HTML页面能够快速地将数据逐步更新显示在用户界面上，不需要重载整个页面。这使得HTML页面能够快速的对用户的操作进行反馈
Ajax涉及的技术
Ajax只是为实现异步交互的手段，包含以下技术
-
HTML页面
-
css
-
JavaScript脚本语言
-
dom
-
xml
-
XMLHttpRequest对象
其中XMLHttpRequest对象是实现Ajax异步交互的核心
Ajax的工作原理
Ajax的核心对象
实现Ajax的核心是XML HttpRequest对象， 该对象为客户端提供了在客户端和服务器之间传输数据的功能。
XML HttpRequest对象提供了一个url来获取数据的简单方式，并且不会使整个页面刷新这使得网页只更新一部分页面而不打扰用户
实现Ajax的执行步骤
1.创建Ajax的核心对象XMLHttpRequest对象
2.通过XMLHttpRequest对象的open()方法与服务器端建立连接
3.构建请求所需的数据内容，并通过XMLHttpRequest对象的send()方法发送给服务器端
4.通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
5.接收并处理服务器端向客户端相应的数据结果
6.将处理结果更新到HTML页面中
创建Ajax的核心对象
虽然w3c已经标准化但在不同浏览器略有不同
function createXMLHttpRequest(){
var httpRequest;
if(window.XMLHttpRequest){//适用于Chrome，Firefox，Safari，.....
httpRequest=new XMLHttpRequest();
}else if(window.ActiveXObject){//适用于IE浏览器
try{
httpRequest=new ActiveXObject（“Msxml2.XMLHTTP”）；//IE 7+
}catch(e){
try{
httpRequest=new ActiveXObject('Microsoft.XMLHTTP');//IE 6-
}catch(e){}
}
}
return httpRequest;
}
Ajax异步请求数据
通过XMLHttpRequest对象的send()方法实现，语法结构如下
httpRequest.send(data)
data:表示请求书的内容
httpRequest.send(null);
httpRequest.send(‘name=wolongxueyuan&password=123456’);
如果该请求是异步模式（默认）该方法会立刻返回。相反如果是同步模式则知道请求的响应完全接受以后该方法才返回
GET请求方式
Ajax中用get方式的货需要注意一下几点
1.将构建的请求数据添加到open()方法中的url地址中
httpRequest.open(‘get’,‘https://www.baidu.com？user=libai&pwd=123456’);`
其中user=libai&pwd=123456就是请求的数据
2.将发生请求数据的send方法中参数设置为null值，代码如下
httpRequest.send(null)
POST请求方式
Ajax中POST方式请求需要注意一下几个问题
1.调用send()方法之前，需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求头信息
httpRequestHeader(header,value);
- header:将要被赋值的请求头名称
- value：给指定的请求头赋的值
httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2.通过XMLHttpRequest对象的send()发送请求数据