ajax工作原理

ajax工作原理

ajax全称async javascript and xml ，是一门新的技术，用于和服务器端交互数据，用来实现网页不刷新的情况下，请求部分内容。
它的原理是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
一：创建一个AJAX对象：

var xhr = new XMLHttpRequest;

二:发送前的基本信息配置

xhr.open(method,url,true,username,userpass)

请求方式： get  post put delete head ..

同步还是异步： true 代表同步   false代表异步
username: 向服务器提供用户名
userpass：向用户名提供请求的用户密码，这两个值一般不写，只允许特定的用户访问的话才传递

请求方式： get  post put delete head ..  这些方式都可以向服务器传递数据，也可以从服务器获取到数据，从本质意义上讲，这些方式是没有区别的。
GET：
    一般应用于从服务器获取数据，给服务器的数据少，从服务器拿的数据多。
   给服务器传递内容，一般使用？传参的方式
    xhr.open('get",url?querystring,true)
        
POST：
    一般应用于向服务器推送数据，给服务器的数据多，从服务器拿的数据少。
    给服务器传递内容，一般使用“请求主体的方式”传递给服务器
    xhr.open('post",url?querystring,true)
    xhr.send('{"name":"jack"}')

PUT：
    一般应用于给服务器上增加资源文件  比如上传图片
    和GET保持一致

DELETE：
    一般应用于从服务器上删除资源文件。
    和POST保持一致

HEAD：
    一般应用于只获取服务器的响应头信息。
    和POST保持一致

GET和POST的区别：
1.get请求传递给服务器的内容存在大小的限制，而post理论上是没有限制的
    原因：url的长度是有限制的，谷歌8kb,火狐7kb，IE2kb的长度显示，超出部分会截取。
2.缓存的问题：  get请求会出现缓存（这个缓存不一定是304），post是没有缓存的。
在项目中，get请求一般不会让其出现缓存，清除缓存：在URL的末尾添加随机数
xhr.open('get',url?querystring+Math.random())
3.安全问题：一般来说get不安全，post相对来说安全一些。
get是通过URL传参的，在网络中，有个URL劫持，所以不安全


三：给onreadystatechang这个事件绑定方法，监听状态的改变

xhr.onreadystatechange = function(){

   
}

    xhr.readyState: ajax状态码，代表当前ajax处理的进度
    0  UNSENT：当前的请求还没有发送
    1 OPENED：url地址已经打开（发送前的参数配置已经完成）
    2 HEADERS_RECEIVED：响应头信息已经接收
    3 LOADING：主要返回的内容正在服务器端进行准备处理
    4 DONE：响应主体的内容已经成功返回到客户端

    xhr.status:http网络状态码，描述了服务器响应内容的状态
        200-299 ： 响应成功
        301：永久重定向/永久转移
        302：临时重定向/临时转移 服务器的负载均衡（超出服务器的承受的范围就做负载均衡）
        304：本次获取的内容是读取缓存中的数据

        400：客户端传递给服务器端的参数出现错误
        401：无权限访问
        404：客户端访问的地址不存在

        500：未知的服务器错误
        503：服务器已经超负荷

四：发送请求：参数是请求主体中传递给服务器的内容
xhr.send(null);