慕课网前端就业班笔记（ajax知识点）
什么是Ajax?
Ajax是一种在无需加载整个网页的情况下，能够更新部分网页的技术。它是几种原有技术的结合体。
Ajax的优点：
1.异步模式->提升用户体验
原因：Javascript是单线程语言，异步方式通讯不需要打断用户操作（不需要等待服务器数据库是否写入），使得响应能力大大提高。因此能够提升用户体验。
2.因为浏览器与服务器之间的传输得到优化，所以一些不必要的数据往返就被减少了，从而减少了带宽占用（因为之前都是由这些往返传输的数据占用的带宽，这些数据减少了，自然带宽占用也减少了）。
3.那为何传输会得到优化呢？这是因为Ajax引擎在客户端运行，所以一些原本由服务器端做的工作转接给了客户端，利用客户端来处理从而减轻服务器和宽带的负担，从而减轻空间和宽带的成本。（特别是在大用户量下的服务器其负载能被显著减少）->从而提升用户体验
Ajax的缺点：
1.不支持浏览器back按钮，因为是在页面内部进行
2.因为与服务器进行通讯，所以存在安全问题，暴露了与服务器交互的细节
3.对搜索引擎支持比较弱。
XMLHttpRequest
XMLHttpRequest是一种技术（支持异步请求），是Ajax的核心。
一、作用：
（1）提出请求和处理响应->服务器（这个过程不阻塞用户）
（2）页面加载时进行局部更新
二、如何使用Ajax?(Ajax异步调用和局部刷新）
创建对象---->创建请求----->设置响应函数->发送请求->获取异步调用返回的数据->使用JavaScript和DOM实现局部刷新
所创建的对象便是XMLHttpRequest对象（异步调用对象）
所创建的请求就是一个新的HTTP请求（创建请求时要指定该HTTP的方法、URL）
所设置的函数是响应HTTP请求状态变化的函数
1.创建XMLHttpRequest对象（这个对象在创建的时候，会涉及到浏览器兼容的问题，所以写法分为两种，一种是支持IE浏览器的写法，一种是支持非IE浏览器的写法，为了能够兼容各种浏览器，所以创建浏览器的时候要做一个封装。
封装代码：
用typeof判断其是否作为本地对象来判断，如果=="undefined"表示其为本地对象，最终返回的是一个对象实例。
详细版代码
//封装通用的xhr对象，兼容各个版本
function createXHR(){
//判断浏览器是否能将XMLHttpRequest作为本地对象实现，针对IE7，firefox,opera等
if(typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){//IE浏览器低于7的版本
//将所有可能出现的ActiveXObject版本放在一个数组内
var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍历创建XMLHttpRequest对象
var len=xhrArr.length;
for(var i=0;i精简版代码
var xmlhttp;
if(window.XMLHtppRequest)
{
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
如何创建HTTP请求？
语法：open(method,url,async)
功能：创建HTTP请求，规定请求的类型，URL及是否异步处理请求
参数说明：
method:请求类型，GET或POST
url:文件在服务器上的位置
async:true(异步）或false(同步）
open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。
url参数是open()方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以使任何类型的文件，如.txt和.xml，或者服务器脚本文件，如.asp和.php(在传回响应之前，能够在服务器上执行任务）
GET与POST的区别
GET更简单也更快
但在以下情况下，必须使用POST请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST没有数据量限制）
3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
同步与异步的区别
同步：
提交请求->等待服务器处理->处理完毕返回 （这个期间客户端浏览器不能干任何事）
异步：
请求通过事件触发->服务器处理（这是浏览器仍然可以作其它事情）->处理完毕
说明：
async是一个布尔值。如果是异步通信方式（true),客户机就不等待服务器的响应；如果是同步方式（false),客户机就要等到服务器返回消息后才去执行其它操作。
代码：
//创建请求
xhr.open(“get”,"./sever/slider.json",true);
设置响应函数
代码：
//响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readystatechange属性发送改变时触发
xhr.onreadystatechange=function(){
//异步调用成功
if(xhr.readyState4){//表示响应内容解析完成，可以在客户端调用
if(xhr.status>=200&& xhr.status<300||xhr.status=304){
//当status>=200时才表示异步调用成功
//当status=304时表示请求资源没有被修改，可以使用缓存
//获得服务器返回的数据
console.log(xhr.responseText)
}
}
}
readyState0表示还没有初始化（未调用方法）
readyState1表示已经调用方法，尚未发送请求
readyState2表示方法已经执行完成
readyState3表示正在解析响应内容
readyState4表示异步调用成功
请求发往服务器->服务器根据请求生成响应->传回给XHR对象
如何发生请求
语法：send(string)
功能：将请求发送到服务器
参数说明：string仅用于post请求
注意事项：仅在POST请求时可以传入参数，不需要则发生null,在调用send方法之后请求被发往服务器
如何添加HTTP头
如果需要像HTML表单那样POST数据，需使用setRequestHeader()来添加HTTP头，然后在send()方法中规定希望希望发送的数据
语法：xmlhttp.setRequestHeader(header,value)
使用：xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
使用get的情况下：
//创建请求
xhr.open(“get”,"./sever/slider.json？user=zhangsan&id=6",true);
//发送请求
xhr.send(null);
使用post的情况下：
//创建请求
xhr.open(“post”,"./sever/slider.json",true);
//发送请求
xhr.send({user:“zhangsan”,id:6});
//设置http头部信息
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”)
在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充
responseText—从服务器进程返回数据的字符串形式
responseXML—从服务器进程返回的DOM兼容的文档数据对象
status—从服务器返回的数字代码，如404（未找到）和200（已就绪）
status Text—伴随状态码的字符串信息