AJAX详解

AJAX

asynchonous javascript and xml异步js和xml

作用：通过ajax技术，客户端可以向服务器端发送请求，把需要展示给用户的数据获取到，也可以把客户端用户填写的一些信息发送给服务器端进行处理。=>ajax实现的是前后端数据请求交互的。

ajax中异步js的概念

此处的异步和之前学习的同步和异步是有区的，这里提到的异步其实想表达的意思是局部刷新

全局刷新

我们客户端看到的页面，都是由服务器端进行渲染的，服务器端把需要呈现的结构样式以及动态的数据都渲染完成，客户端浏览器拿到最终的代码呈现即可。

如果当前页面中的部分结构和 数据发生改变，需要由服务器端重新渲染，把最新渲染的结果返回给客户端，客户端通过整体刷新来展示最新效果。

局部刷新

局部刷新不是服务器端来渲染页面，客户端通过ajax等技术向服务器端发送请求，服务器端只需要把数据返回给客户端即可，页面的渲染是由客户端来完成的

如果有一个区域的数据发生改变，只需要在重新发送ajax请求，获取的最新数据，由客户端重新把当前区域的内容重新渲染即可，页面不用重新加载。

XML

作用一般是用来存储的，不在于展示，用户自己扩展一些有意义的标签，按照指定的结构，清晰明了的存储一些信息：在很早以前，使用ajax实现客户端和服务器端数据交互，所采用的数据格式一般都是xml格式的，由于xml格式解析的时候不太方便，所以目前项目中都是使用json格式的数据来代替xml格式的数据传输.

数据传输常用的格式：

• json（一般都是json格式的字符串）
• xml
• 文件流（buffer、二进制、base64）
• ……

html：超文本标记语言
xhtml：更加严谨的html
dhtml：页面中的一些数据是动态更新的

xml：可扩展的标记语言，相对于html来说，html中的标签都是w3c规定的，而xml中的标签大部分都是自己随意设置。

基础语法
1、创建一个ajax对象

let xhr= new XMLHttpRequest

2、打开请求链接（配置ajax请求的基本参数）

xhr.open(method,url,sync/async,user-name,user-password)

3、监听状态请求，获取需要的数据

xhr.onreadystatechange=function(){
xhr.readyState:ajax状态码 0-4
xhr.status:http网络状态码
xhr.responseText:获取服务器返回的字符串（json字符串）
xhr.responseXML:获取服务器返回的xml格式数据
......
}

4、发送ajax请求：传递的内容可以是null也可以是其他信息

xhr.send(null)

sync/async

xhr.open('get','josn/linker.json',false,user-name,user-password)

1. 第一个参数：请求方式
   [GET] get、delete、head
   [POST] post put
2. 第二个参数：请求的url地址
   通过此地值我们可以向服务器发送请求，获取不同的数据，地址其实是起一个标示作用，告诉服务器端我们想要获取哪些数据；真实项目中，后台开发工程师会提供给我们一个api接口文档，在文档中声明了不同接口的地址
3. 第三个参数不写默认是true：异步，写false为同步
4. 最后两个参数用户名和密码
   我们一般不设置，只有当服务器做安全限制的时候，限定某些用户才可以访问服务器，此时我们需要提供安全验证和用户名和密码

onreadystatechange
onreadystatechange：当ajax状态发生改变的时候会触发该事件的执行
xhr.readyState：0 1 2 3 4

• 0：unsend未发送，创建一个ajax实例，默认状态就是0
• 1：opened已经打开，执行xhr.open后状态变为1
• 2：heads_received客户端已经获取到服务器返回的响应头信息
• 3：loading服务器返回的相应主体内容正在传输中
• 4：done客户端已经接受到服务器返回的响应主体内容（代表当前请求已经完成了）

响应头和响应主体

服务器端在交互的时候肯定会把一些数据返回给客户端，而且返回给客户端的数据分为两种：通过 响应头返回或者通过响应主体返回；而获取响应头信息有两种方式：xhr.getAllResponseHeader和xhr.getResponseHeader

请求头和请求主体

客户端向服务器端发送请求额时候，有时候也需要把一些信息传递给服务器端，而传递给服务器端有以下几种方式：

通过设置请求头把信息传递给服务器
通过请求主体把信息传递给服务器
通过url请求地址后面的问号传参的方式把内容传递给服务器 xhr.setRequestHeader:设置请求头信息
timeout

xhr.timeout:设置请求的超时时间，当前请求如果超过了这个时间还没有完成，属于超时，请求中断，同时会触发xhr.ontimerout这个事件

ajax请求方式
客户端向服务器端发送请求的时候，有很多的请求方式

get系列：get、delete、head

• get系列的目的一般从服务器端获取数据，例如获取一些数据信息展示在页面中
• delete：删除，从服务器端删除某些资源
• head：只从服务器端上获取响应头的部分信息，此请求无法获取响应主体的信息。

post系列 post、put

• put：存放，把一些资源存放在服务上
• post系列得目的一般都是把客户端的一些数据推送到服务器端:例如用户注册，客户端需要把用户填写的数据发送到服务器端。

不管哪一种方式，客户端都可以把一些信息传递给服务器，服务器也可以把一些信息传递给客户端，get可以理解为给的少拿得多，post可以理解为给的多拿得少

GET和POST的主要区别

1、传递方式的区别

GET方式：传递给服务器信息采用的是url问号传参的方式来完成的

xhr.open('get','/gitInfo?name=wgh&age=27&sex=0')

post方式；传递给服务器信息采用的是设置请求主体的方式来完成的

xhr.send(name=wgh&age=44&sex=0);//此方法中存放的就是请求主体内容

2、get请求传递给服务器的内容有长度的限制，post没有

get是问号传参的，如果传递个内容过多，导致url过长
浏览器对于URL地址有一个长度限制，谷歌一般限制在8kb，火狐限制在7kb，ie限制在2kb，超过限制浏览器会把超过的部分截取掉

请求主体中传递的内容是没有大小限制的，但是真实项目中为了保证传输速度，我们会人为的控制传输内容大小。

3、get请求会产生缓存（缓存是不可控的），post请求没有缓存

因为get是问号传参传递给服务器内容，第一次通过地址传递某些参数给服务器，获取到一些新的数据，第二次如果传递给服务器的参数没有发生变化，很可能从服务器端获取的数据还是和上次一模一样，而不是最新的数据。
清除缓存

xhr.open('get','/getLNewInfo?type=a&_='+Math.random()')

4、get请求没有post请求安全

因为get请求是问号传递参数的形式，很多时候，别人可以通过黑客技术，劫持我们所发的url，如果是问号传递参数，传递给服务器的信息就会被劫持掉或者恶意篡改。
一般所有涉及到安全信息，我们都是用post传输。例如：所有涉及账号密码的都应该使用post传输

HTTTP网络状态码

通过一些标识数字反应出当前服务器的处理状态

• 200：成功，一切正常
• 301：永久转移（永久重定向）一般来说做域名的转移的时候会用到
• 302：临时转移（临时重定向）服务器负载均衡
• 304：读取的是缓存中的数据
• 307：临时重定向
• 400：请求参数错误
• 401：请求权限不够
• 404：请求地址不存在
• 500：未知的服务器错误
• 503：服务器超负荷请求
• 504：响应超时，可能是服务器端未打开（）

$.ajax({
url:'',//当前我么需要请求的url地址
method：'',//请求方式get系列和post系列 老版本中jq使用的不是method，而是type（现在使用type和method都是一样的的）;zipto中只支持type，不支持method
dataType:'json',//'text(默认)/json/xml....'预设值服务返回的数据格式（此处输入的值并不会影响服务器的返回结果，服务器返回给客户端的数据依然是实现事先商定好的，可能是字符串，可能是xml数据），而预设的值是服务器返回给我们的结果再次转换为我们需要的数据格式
data：{
name:wgh,
age:14
}
//data:可以传递一个对象，也可以传递一个字符串，即使传递的是一个对象，他也会把对象转换为字符串（"name=wgh&age=17"）,它的作用是向服务器传递内容，而且如果传递的方式是get系的，jq会把字符串放在url的末尾传递给服务器，如果是post系列，jq会把内容放在请求主体中传递给服务器
async：true，//设置同步异步：默认是true异步，false为同步
cache：ture，//在get请求下，我们可以通过cache设置是否清除缓存，true代表的是不清楚，false代表的是清除（jq在请求地址的末尾天剑一个随机数）
sucess：function(result){}//当客户已经从服务器端把数据获取完成了，会触发这个回到函数的执行，result就是从服务器端获取的内容（获取的内容仅过了处理，jq按照data-type预设的值，把服务器返回的数据解析为我们想要的格式了。）

})