Ajax相关知识点

ajax特性：可实现局部刷新页面

自己封装Ajax

基本步骤

１.发送请求：

• var xhr=new XMLHttpRequest();
• xhr.open("GET","test1.txt",true)：规定请求的类型、URL 以及是否异步处理请求。
• xhr.send()

xhr.open(method,url,async)>
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
xhr.send()>
send(string): 将请求发送到服务器。
string：仅用于 POST 请求

２.判断响应是否成功（获得响应数据）：

• 知晓请求的状态 xhr.readyState==4,每次状态改变都会触发onreadystatechange

0:请求未初始化
1:与服务器连接已经建立
2:服务器已经接收到请求
3:服务器正在处理请求
4:请求处理完成，且响应已经就绪

• 监听服务器的状态码xhr.status == 200

xhr.onreadystatechange=function(){
            if(xhr.readyState==4 &&xhr.status==200 ){
                //执行响应数据 
            }
   }

注意：Ajax中get post处理方式不一样

• 请求url不同
  get: 请求数据会出现在url中：opt.url + '?' + postData
  post: opt.url
• post需要设置请求头
  这个请求头是告诉服务器怎么去解析请求的正文部分。
• xhr.send
  post: xhr.send(postData);
  get: xmlHttp.send(null);

ajax实现完整代码

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
    function ajax(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            xmlHttp.send(postData);
        }
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
            xmlHttp.send(null);
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                opt.success(xmlHttp.responseText);
            }
        };
    }
//执行
ajax({
    method: 'POST',
    url: 'test.php',
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    success: function (response) {
       console.log(response)；
    }
});

封装
实现原理

---

get post方式的区别：

• GET：一般用来获取数据 ，POST：一般用来修改数据
• get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
• 大部分浏览器对GET url有长度限制2k，post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
• 缓存的问题。GET 请求默认在ajax环境下是会被缓存的 ，这样就会减轻服务器端的压力。但是post请求是不会被缓存的。
• 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
• GET/POST使用场景有区别
  • 用get:
    请求中的URL可以被手动输入
    请求中的URL可以被存在书签里，或者历史里，或者快速拨号里面，或者分享给别人。
    请求中的URL可以被缓存。GET 请求默认在ajax环境下是会被缓存的 ，这样就会减轻服务器端的压力。但是post请求是不会被缓存的。
    用GET： 可以重复的交互，比如取个数据，跳个页面
  • post:
    表单数据，数据库内添加新的数据行，用POST, 因为POST不能被缓存，所以浏览器不会多次提交。
• 延伸
  http:get 获取数据 post:修改数据 put:增加数据 delete：删除数据

---

如何判断ajax数据加载完毕？

• ajax请求设置为同步（同步慎用-项目中的这种办法）
  在$(ajax)中，的async:false，变为同步，也就是说，先请求并将数据写入表格以后，再执行排序的代码.
  但是建议：同步请求慎用，在数据量比较大的时候，用户缺一直在等待数据加载出来，很痛苦
• ajax异步请求，判断数据加载完毕
  • 设置定时器监测
  • promise（fetch）

---

会更新

跨域的几种方式具体实现和应用

ajax实时更新数据

取消一个Ajax

xhr.absort();

判定是一個ajax請求

• 请求进行拦截，在拦截器中我需要判断HttpServletRequest是否为Ajax异步请求。X-Requested-With="XMLHttpRequest"来判断这个请求是否为Ajax请求！