Ajax-基本使用方法

简介: Ajax-基本使用方法

使用Ajax的五个步骤:


  1. 创建一个异步对象
  2. 设置请求方式和请求地址
  3. 发送请求
  4. 监听状态的变化
  5. 处理返回的结果


1. 创建一个异步对象XMLHttpRequest


IE5和IE6的创建方法:


var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");


所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)的创建方法:


var xmlhttp = new XMLHttpRequest;


那我们怎么处理浏览器兼容性问题呢?我们可以这样做:


var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


2. 设置请求方式和请求地址


如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 方法.


xmlhttp.open("GET","test1.txt",true);


method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)


3.发送请求


xmlhttp.send();


4. 监听状态的变化


    xmlhttp.onreadystatechange = function (ev2) {
       /*
       0: 请求未初始化
       1: 服务器连接已建立
       2: 请求已接收
       3: 请求处理中
       4: 请求已完成,且响应已就绪
       */
       if(xmlhttp.readyState === 4){
           // 判断是否请求成功
           // 状态码大于200小于300或等于304时才会请求成功
           if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||xmlhttp.status === 304){
                5.处理返回的结果
               // console.log("接收到服务器返回的数据");
               success(xmlhttp);
               // 此处的sucess是封装Ajax函数里面的形参,后面的error也是如此。
           }else{
               // console.log("没有接收到服务器返回的数据");
               error(xmlhttp);
           }
       }
   }


5.处理返回的结果


处理方式在上一个步骤中已有 如果接收到数据则调用第一个函数,否则调用第二个函数。


6.浏览器兼容性问题


6.1 Ajax缓存机制


在IE浏览器中会出现此问题 在IE浏览器中,如果通过Ajax发送GET请求,那么IE浏览器认为同一个URL只有一个结果。


解决办法: 每次请求的时候都给url一个不同的值 这个时候我们可以想到用new Date().getTime()方法获得一个值添加到url中。


a7bc19aeb5d644449ed4e76035f3edc9_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

改一下这里的url: "text1.txt?t="+(new Date().getTime());


6.2 创建异步对象的不同


var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


7.封装Ajax


每次编写Ajax都会有5个步骤,因此这些代码是一样的,我们可以用一个函数把这些代码封装起来:


function obj2str(obj) {
    obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    obj.t = new Date().getTime();
    var res = [];
    for(var key in obj){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(url, obj, timeout, success, error) {
    // 0.将对象转换为字符串
    var str = obj2str(obj); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式和请求地址
    /*
    method:请求的类型;GET 或 POST
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)
    */
    xmlhttp.open("GET", url+"?"+str, true);
    // 3.发送请求
    xmlhttp.send();
    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成,且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, timeout);
    }
}




相关文章
|
11天前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
17 1
|
11天前
|
XML JSON 前端开发
Ajax的使用方法
Ajax的使用方法
16 0
|
XML Web App开发 JSON
小白来实现一个Ajax请求[Ajax使用方法及相关知识点详细解析——超级全]
写在前面: 本文主要总结整理Ajax使用方法背景知识点的详细解析,以及Ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通过本文能够作为一个Ajax的查找资料,不懂Ajax?看这篇文章就可以了。 ajax简介: Ajax 的全称是Asynchronous JavaScript and XML,意思是:异步 JavaScript 和 XML Ajax是使用XMLHttpRequest对象与服务器端通信的脚本语言 可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。 AJAX可以无需刷新页面而与服务器端进行通信。
232 0
小白来实现一个Ajax请求[Ajax使用方法及相关知识点详细解析——超级全]
|
XML JSON 前端开发
Ajax:初次认识ajax,ajax使用方法
Ajax:初次认识ajax,ajax使用方法
Ajax:初次认识ajax,ajax使用方法
|
11天前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
25 0
N..
|
11天前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
25 1
|
11天前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
65 0
|
11天前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤