搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

原生js的ajax

Hahaha的生活 2018-03-01

今天有兴趣写一下原生js的ajax数据请求,以前接触的时候还感觉很难,前两天突然看了一下原理,靠,原来也就这样,所以说知识读了还是有用的,即使你之前没有明白但是回过头来一看,突然就懂了,心理high.

文档是看的官网文档 后面代码是自己写的

1、创建XMLHttpRequest()对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

 
   
   
 
  1. // 大部分浏览器支持XMLHttpRequest

  2. var req = new XMLHttpRequest();

  3. // 兼容IE6写法

  4. var xmlHttp = new ActiveXObject('Microsoft.XMLHttp')

  5. // 完整写法

  6. if(window.XMLHttpRequset){

  7. // code for IE7+, Firefox, Chrome, Opera, Safari

  8.    var xmlHttp = new XMLHttpRequest();

  9. }else{

  10. // code for IE5, IE6

  11.    var xmlHttp = new ActiveXObject('Microsoft.XMLHttp');

  12. }

2、向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法:

规定请求连接和类型

 
   
   
 
  1. open(method, url, async)

向服务器发送请求

 
   
   
 
  1. send(string)  string仅用于post请求

如果需要想接口传数据get方法直接在链接后面拼数据字符串;如果post传数据需要使用 setRequestHeader() 来添加 HTTP 头

 
   
   
 
  1. // get

  2. xmlHttp.open("get", "xxx.xxx.js?aaa=111&b=222", true);

  3. //post

  4. xmlHttp.open("POST","ajax_test.asp",true);

  5. xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  6. xmlHttp.send("fname=Bill&lname=Gates");

注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

 
   
   
 
  1. xmlhttp.open("GET","test1.txt",false);

  2. xmlhttp.send();

  3. // TODO

  4. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3、服务器响应

responseText 获取字符串类型的相响应数据

responseXML 获取XML类型的响应数据

 
   
   
 
  1. xmlHttp.responseText

  2. xmlHttp.responseXML

4、响应事件 xmlHttp.onreadystatechange

当readyState改变是会触发onreadystatechange事件

下面是 XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4发生变化。
status 200: "OK" 404: 未找到页面

readyState各种状态

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成,且响应已就绪

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

 
   
   
 
  1. xmlHttp.onreadystatechange = function() {

  2.    if(xmlHttp.state == '200' && xmlHttp.readyState == '4'){

  3.        // do something

  4.    }

  5. }

Demo:

 
   
   
 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <title>原生ajax请求</title>

  6.    <script>

  7.        var getData = function() {

  8.            var xmlhttp;

  9.            if(window.XMLHttpRequest){

  10.                xmlhttp = new XMLHttpRequest();

  11.            }else{

  12.                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

  13.            }

  14.            xmlhttp.onreadystatechange = function () {

  15.                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

  16.                    console.log(xmlhttp.responseText);

  17.                    document.getElementById('text').innerHTML = xmlhttp.responseText;

  18.                }

  19.            }

  20.            xmlhttp.open('get', 'http://xxx.xxx.com/mobile/index.php?act=area&op=area_list_arr2', true);

  21.            xmlhttp.send();

  22.        }

  23.    </script>

  24. </head>

  25. <body>

  26. <button onclick="getData()">获取后台数据</button>

  27. <div id="text"></div>

  28. </body>

  29. </html>

ajax 封装 只有基本使用

 
   
   
 
  1. /**

  2. * @author: zhaoyangyue

  3. * @param param=defaultParam  和defaultParam的格式一樣就可以

  4. * param传对象

  5. */

  6. /

  7. function ajax(param) {

  8.    var xmlhttp;

  9.    var defaultParam = {

  10.        type: 'get',

  11.        url: '',

  12.        async: true,

  13.        dataType: '',

  14.        success: function () {

  15.            return;

  16.        },

  17.        error: function () {

  18.            alert('网络错误');

  19.        }

  20.    }

  21.    for(var i in defaultParam){

  22.        if(!param[i]){

  23.            param[i] = defaultParam[i];

  24.        }

  25.    }

  26.    if(window.XMLHttpRequest){

  27.        xmlhttp = new XMLHttpRequest();

  28.    }else{

  29.        xmlhttp = new ActiveXObject('Microsoft XMLHTTP');

  30.    }

  31.    if(param.type.toLowerCase() == 'post'){

  32.        // post方法传值需要设置请求头 get不用Content-Type:application/x-www-form-urlencoded

  33.        xmlhttp.open(param.type, param.url, param.async);

  34.        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  35.        xmlhttp.send(param.data);

  36.    }else{

  37.        if(param.url.indexOf('?') > -1){

  38.            xmlhttp.open(param.type, param.url + '&' + param.data , param.async);

  39.        }else{

  40.            xmlhttp.open(param.type, param.url + '?' + param.data , param.async);

  41.        }

  42.        xmlhttp.send();

  43.    }

  44.    if(param.async){

  45.        xmlhttp.onreadystatechange = function () {

  46. //            ajax运行状态为4 已完成请求 并且请求成功

  47.            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

  48.                // TODO

  49.                if(param.dataType == 'json'){

  50.                    param.success(JSON.parse(xmlhttp.responseText));

  51.                }else{

  52.                    param.success(xmlhttp.responseText)

  53.                }

  54.            }else if(xmlhttp.readyState == 4 && xmlhttp.status != 200){

  55.                if(param.dataType == 'json'){

  56.                    param.error(JSON.parse(xmlhttp.responseText));

  57.                }else{

  58.                    param.error(xmlhttp.responseText)

  59.                }

  60.            }

  61.        }

  62.    }else{

  63.        param.success(xmlhttp.responseText);

  64.    }

  65. }

完整案例

 
   
   
 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <title>原生ajax请求</title>

  6. </head>

  7. <body>

  8. <button onclick="ajax(object)">get获取后台数据</button>

  9. <button onclick="ajax(post)">POST</button>

  10. <div id="text"></div>

  11. </body>

  12. </html>

  13. <script>

  14.    //AJAX封装

  15.    var object = {

  16.        type: 'get',

  17.        url: 'http://xxx.xxx.com/mobile/index.php',

  18.        async: true,

  19.        data: 'act=area&op=area_list_arr2',

  20. //        dataType: 'json',

  21.        success: function (res) {

  22.            // callback

  23.            console.log(res);

  24.            document.getElementById('text').innerHTML = res;

  25.        },

  26.        error: function (err) {

  27.            // callback

  28.            console.log(err)

  29.        }

  30.    }

  31.    var post = {

  32.        type: 'post',

  33.        url: 'http://xxx.xxx.com/mobile/index.php?act=member_order&op=get_current_deliver',

  34. //        async: true,

  35.        data: 'key=xxx&order_id=292',

  36.        dataType: 'json',

  37.        success: function (res) {

  38.            console.log(res);

  39.        },

  40.        error: function (err) {

  41.            alert('false');

  42.            console.log(err)

  43.        }

  44.    }

  45.    /**

  46.     * @author: zyy_cherish@163.com

  47.     * @param param=defaultParam  和defaultParam的格式一樣就可以

  48.     * param传对象

  49.     */

  50.    /

  51.    function ajax(param) {

  52.        var xmlhttp;

  53.        var defaultParam = {

  54.            type: 'get',

  55.            url: '',

  56.            async: true,

  57.            dataType: '',

  58.            success: function () {

  59.                return;

  60.            },

  61.            error: function () {

  62.                alert('网络错误');

  63.            }

  64.        }

  65.        for(var i in defaultParam){

  66.            if(!param[i]){

  67.                param[i] = defaultParam[i];

  68.            }

  69.        }

  70.        if(window.XMLHttpRequest){

  71.            xmlhttp = new XMLHttpRequest();

  72.        }else{

  73.            xmlhttp = new ActiveXObject('Microsoft XMLHTTP');

  74.        }

  75.        if(param.type.toLowerCase() == 'post'){

  76.            // post方法传值需要设置请求头 get不用Content-Type:application/x-www-form-urlencoded

  77.            xmlhttp.open(param.type, param.url, param.async);

  78.            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  79.            xmlhttp.send(param.data);

  80.        }else{

  81.            if(param.url.indexOf('?') > -1){

  82.                xmlhttp.open(param.type, param.url + '&' + param.data , param.async);

  83.            }else{

  84.                xmlhttp.open(param.type, param.url + '?' + param.data , param.async);

  85.            }

  86.            xmlhttp.send();

  87.        }

  88.        if(param.async){

  89.            xmlhttp.onreadystatechange = function () {

  90. //            ajax运行状态为4 已完成请求 并且请求成功

  91.                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

  92.                    // TODO

  93.                    if(param.dataType == 'json'){

  94.                        param.success(JSON.parse(xmlhttp.responseText));

  95.                    }else{

  96.                        param.success(xmlhttp.responseText)

  97.                    }

  98.                }else if(xmlhttp.readyState == 4 && xmlhttp.status != 200){

  99.                    if(param.dataType == 'json'){

  100.                        param.error(JSON.parse(xmlhttp.responseText));

  101.                    }else{

  102.                        param.error(xmlhttp.responseText)

  103.                    }

  104.                }

  105.            }

  106.        }else{

  107.            param.success(xmlhttp.responseText);

  108.        }

  109.    }

  110. </script>


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《原生js的ajax》的版权归原作者「Hahaha的生活」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Hahaha的生活微信公众号

Hahaha的生活微信公众号:gh_1d03fb048c95

Hahaha的生活

手机扫描上方二维码即可关注Hahaha的生活微信公众号

Hahaha的生活最新文章

精品公众号随机推荐