原生js的ajax

Posted Hahaha的生活

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js的ajax相关的知识，希望对你有一定的参考价值。

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

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

1、创建XMLHttpRequest()对象

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

 
   
   
 
    
  
    
    
  
  1. // 大部分浏览器支持XMLHttpRequest
    2. 
  
    
    
  
  2. var req = new XMLHttpRequest();
    3. 
  
    
    
  
    4. 
  
    
    
  
  4. // 兼容IE6写法
    5. 
  
    
    
  
  5. var xmlHttp = new ActiveXObject('Microsoft.XMLHttp')
    6. 
  
    
    
  
    7. 
  
    
    
  
  7. // 完整写法
    8. 
  
    
    
  
  8. if(window.XMLHttpRequset){
    9. 
  
    
    
  
  9. // code for IE7+, Firefox, Chrome, Opera, Safari
    10. 
  
    
    
  
  10.     var xmlHttp = new XMLHttpRequest();
    11. 
  
    
    
  
  11. }else{
    12. 
  
    
    
  
  12. // code for IE5, IE6
    13. 
  
    
    
  
  13.     var xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
    14. 
  
    
    
  
  14. }
    15.

2、向服务器发送请求

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

规定请求连接和类型

 
   
   
 
    
  
    
    
  
  1. open(method, url, async)
    2.

向服务器发送请求

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

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

 
   
   
 
    
  
    
    
  
  1. // get
    2. 
  
    
    
  
  2. xmlHttp.open("get", "xxx.xxx.js?aaa=111&b=222", true);
    3. 
  
    
    
  
    4. 
  
    
    
  
  4. //post
    5. 
  
    
    
  
  5. xmlHttp.open("POST","ajax_test.asp",true);
    6. 
  
    
    
  
  6. xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    7. 
  
    
    
  
  7. xmlHttp.send("fname=Bill&lname=Gates");
    8.

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

 
   
   
 
    
  
    
    
  
  1. xmlhttp.open("GET","test1.txt",false);
    2. 
  
    
    
  
  2. xmlhttp.send();
    3. 
  
    
    
  
  3. // TODO
    4. 
  
    
    
  
  4. document.getElementById("myDiv").innerhtml=xmlhttp.responseText;
    5.

3、服务器响应

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

responseXML 获取XML类型的响应数据

 
   
   
 
    
  
    
    
  
  1. xmlHttp.responseText
    2. 
  
    
    
  
  2. xmlHttp.responseXML
    3.

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. 
  
    
    
  
  2.     if(xmlHttp.state == '200' && xmlHttp.readyState == '4'){
    3. 
  
    
    
  
  3.         // do something
    4. 
  
    
    
  
    5. 
  
    
    
  
  5.     }
    6. 
  
    
    
  
  6. }
    7.

Demo:

 
   
   
 
    
  
    
    
  
  1. <!DOCTYPE html>
    2. 
  
    
    
  
  2. <html lang="en">
    3. 
  
    
    
  
  3. <head>
    4. 
  
    
    
  
  4.     <meta charset="UTF-8">
    5. 
  
    
    
  
  5.     <title>原生ajax请求</title>
    6. 
  
    
    
  
  6.     <script>
    7. 
  
    
    
  
  7.         var getData = function() {
    8. 
  
    
    
  
  8.             var xmlhttp;
    9. 
  
    
    
  
  9.             if(window.XMLHttpRequest){
    10. 
  
    
    
  
  10.                 xmlhttp = new XMLHttpRequest();
    11. 
  
    
    
  
  11.             }else{
    12. 
  
    
    
  
  12.                 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    13. 
  
    
    
  
  13.             }
    14. 
  
    
    
  
  14.             xmlhttp.onreadystatechange = function () {
    15. 
  
    
    
  
  15.                 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    16. 
  
    
    
  
  16.                     console.log(xmlhttp.responseText);
    17. 
  
    
    
  
  17.                     document.getElementById('text').innerHTML = xmlhttp.responseText;
    18. 
  
    
    
  
  18.                 }
    19. 
  
    
    
  
  19.             }
    20. 
  
    
    
  
  20.             xmlhttp.open('get', 'http://xxx.xxx.com/mobile/index.php?act=area&op=area_list_arr2', true);
    21. 
  
    
    
  
  21.             xmlhttp.send();
    22. 
  
    
    
  
  22.         }
    23. 
  
    
    
  
  23.     </script>
    24. 
  
    
    
  
  24. </head>
    25. 
  
    
    
  
  25. <body>
    26. 
  
    
    
  
  26. <button onclick="getData()">获取后台数据</button>
    27. 
  
    
    
  
  27. <div id="text"></div>
    28. 
  
    
    
  
  28. </body>
    29. 
  
    
    
  
    30. 
  
    
    
  
  30. </html>
    31.

ajax 封装 只有基本使用

 
   
   
 
    
  
    
    
  
  1. /**
    2. 
  
    
    
  
  2.  * @author: zhaoyangyue
    3. 
  
    
    
  
  3.  * @param param=defaultParam  和defaultParam的格式一樣就可以
    4. 
  
    
    
  
  4.  * param传对象
    5. 
  
    
    
  
  5.  */
    6. 
  
    
    
  
  6. /
    7. 
  
    
    
  
  7. function ajax(param) {
    8. 
  
    
    
  
  8.     var xmlhttp;
    9. 
  
    
    
  
  9.     var defaultParam = {
    10. 
  
    
    
  
  10.         type: 'get',
    11. 
  
    
    
  
  11.         url: '',
    12. 
  
    
    
  
  12.         async: true,
    13. 
  
    
    
  
  13.         dataType: '',
    14. 
  
    
    
  
  14.         success: function () {
    15. 
  
    
    
  
  15.             return;
    16. 
  
    
    
  
  16.         },
    17. 
  
    
    
  
  17.         error: function () {
    18. 
  
    
    
  
  18.             alert('网络错误');
    19. 
  
    
    
  
  19.         }
    20. 
  
    
    
  
  20.     }
    21. 
  
    
    
  
  21.     for(var i in defaultParam){
    22. 
  
    
    
  
  22.         if(!param[i]){
    23. 
  
    
    
  
  23.             param[i] = defaultParam[i];
    24. 
  
    
    
  
  24.         }
    25. 
  
    
    
  
  25.     }
    26. 
  
    
    
  
  26.     if(window.XMLHttpRequest){
    27. 
  
    
    
  
  27.         xmlhttp = new XMLHttpRequest();
    28. 
  
    
    
  
  28.     }else{
    29. 
  
    
    
  
  29.         xmlhttp = new ActiveXObject('Microsoft XMLHTTP');
    30. 
  
    
    
  
  30.     }
    31. 
  
    
    
  
  31.     if(param.type.toLowerCase() == 'post'){
    32. 
  
    
    
  
  32.         // post方法传值需要设置请求头 get不用Content-Type:application/x-www-form-urlencoded
    33. 
  
    
    
  
  33.         xmlhttp.open(param.type, param.url, param.async);
    34. 
  
    
    
  
  34.         xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    35. 
  
    
    
  
  35.         xmlhttp.send(param.data);
    36. 
  
    
    
  
  36.     }else{
    37. 
  
    
    
  
  37.         if(param.url.indexOf('?') > -1){
    38. 
  
    
    
  
  38.             xmlhttp.open(param.type, param.url + '&' + param.data , param.async);
    39. 
  
    
    
  
  39.         }else{
    40. 
  
    
    
  
  40.             xmlhttp.open(param.type, param.url + '?' + param.data , param.async);
    41. 
  
    
    
  
  41.         }
    42. 
  
    
    
  
  42.         xmlhttp.send();
    43. 
  
    
    
  
  43.     }
    44. 
  
    
    
  
  44.     if(param.async){
    45. 
  
    
    
  
  45.         xmlhttp.onreadystatechange = function () {
    46. 
  
    
    
  
  46. //            ajax运行状态为4 已完成请求 并且请求成功
    47. 
  
    
    
  
  47.             if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    48. 
  
    
    
  
  48.                 // TODO
    49. 
  
    
    
  
  49.                 if(param.dataType == 'json'){
    50. 
  
    
    
  
  50.                     param.success(JSON.parse(xmlhttp.responseText));
    51. 
  
    
    
  
  51.                 }else{
    52. 
  
    
    
  
  52.                     param.success(xmlhttp.responseText)
    53. 
  
    
    
  
  53.                 }
    54. 
  
    
    
  
    55. 
  
    
    
  
  55.             }else if(xmlhttp.readyState == 4 && xmlhttp.status != 200){
    56. 
  
    
    
  
  56.                 if(param.dataType == 'json'){
    57. 
  
    
    
  
  57.                     param.error(JSON.parse(xmlhttp.responseText));
    58. 
  
    
    
  
  58.                 }else{
    59. 
  
    
    
  
  59.                     param.error(xmlhttp.responseText)
    60. 
  
    
    
  
  60.                 }
    61. 
  
    
    
  
  61.             }
    62. 
  
    
    
  
  62.         }
    63. 
  
    
    
  
  63.     }else{
    64. 
  
    
    
  
  64.         param.success(xmlhttp.responseText);
    65. 
  
    
    
  
  65.     }
    66. 
  
    
    
  
  66. }
    67.

完整案例

 
   
   
 
    
  
    
    
  
  1. <!DOCTYPE html>
    2. 
  
    
    
  
  2. <html lang="en">
    3. 
  
    
    
  
  3. <head>
    4. 
  
    
    
  
  4.     <meta charset="UTF-8">
    5. 
  
    
    
  
  5.     <title>原生ajax请求</title>
    6. 
  
    
    
  
  6. </head>
    7. 
  
    
    
  
  7. <body>
    8. 
  
    
    
  
  8. <button onclick="ajax(object)">get获取后台数据</button>
    9. 
  
    
    
  
  9. <button onclick="ajax(post)">POST</button>
    10. 
  
    
    
  
  10. <div id="text"></div>
    11. 
  
    
    
  
  11. </body>
    12. 
  
    
    
  
    13. 
  
    
    
  
  13. </html>
    14. 
  
    
    
  
  14. <script>
    15. 
  
    
    
  
  15.     //AJAX封装
    16. 
  
    
    
  
  16.     var object = {
    17. 
  
    
    
  
  17.         type: 'get',
    18. 
  
    
    
  
  18.         url: 'http://xxx.xxx.com/mobile/index.php',
    19. 
  
    
    
  
  19.         async: true,
    20. 
  
    
    
  
  20.         data: 'act=area&op=area_list_arr2',
    21. 
  
    
    
  
  21. //        dataType: 'json',
    22. 
  
    
    
  
  22.         success: function (res) {
    23. 
  
    
    
  
  23.             // callback
    24. 
  
    
    
  
  24.             console.log(res);
    25. 
  
    
    
  
  25.             document.getElementById('text').innerHTML = res;
    26. 
  
    
    
  
  26.         },
    27. 
  
    
    
  
  27.         error: function (err) {
    28. 
  
    
    
  
  28.             // callback
    29. 
  
    
    
  
  29.             console.log(err)
    30. 
  
    
    
  
  30.         }
    31. 
  
    
    
  
  31.     }
    32. 
  
    
    
  
  32.     var post = {
    33. 
  
    
    
  
  33.         type: 'post',
    34. 
  
    
    
  
  34.         url: 'http://xxx.xxx.com/mobile/index.php?act=member_order&op=get_current_deliver',
    35. 
  
    
    
  
  35. //        async: true,
    36. 
  
    
    
  
  36.         data: 'key=xxx&order_id=292',
    37. 
  
    
    
  
  37.         dataType: 'json',
    38. 
  
    
    
  
  38.         success: function (res) {
    39. 
  
    
    
  
  39.             console.log(res);
    40. 
  
    
    
  
  40.         },
    41. 
  
    
    
  
  41.         error: function (err) {
    42. 
  
    
    
  
  42.             alert('false');
    43. 
  
    
    
  
  43.             console.log(err)
    44. 
  
    
    
  
  44.         }
    45. 
  
    
    
  
  45.     }
    46. 
  
    
    
  
  46.     /**
    47. 
  
    
    
  
  47.      * @author: zyy_cherish@163.com
    48. 
  
    
    
  
  48.      * @param param=defaultParam  和defaultParam的格式一樣就可以
    49. 
  
    
    
  
  49.      * param传对象
    50. 
  
    
    
  
  50.      */
    51. 
  
    
    
  
  51.     /
    52. 
  
    
    
  
  52.     function ajax(param) {
    53. 
  
    
    
  
  53.         var xmlhttp;
    54. 
  
    
    
  
  54.         var defaultParam = {
    55. 
  
    
    
  
  55.             type: 'get',
    56. 
  
    
    
  
  56.             url: '',
    57. 
  
    
    
  
  57.             async: true,
    58. 
  
    
    
  
  58.             dataType: '',
    59. 
  
    
    
  
  59.             success: function () {
    60. 
  
    
    
  
  60.                 return;
    61. 
  
    
    
  
  61.             },
    62. 
  
    
    
  
  62.             error: function () {
    63. 
  
    
    
  
  63.                 alert('网络错误');
    64. 
  
    
    
  
  64.             }
    65. 
  
    
    
  
  65.         }
    66. 
  
    
    
  
  66.         for(var i in defaultParam){
    67. 
  
    
    
  
  67.             if(!param[i]){
    68. 
  
    
    
  
  68.                 param[i] = defaultParam[i];
    69. 
  
    
    
  
  69.             }
    70. 
  
    
    
  
  70.         }
    71. 
  
    
    
  
  71.         if(window.XMLHttpRequest){
    72. 
  
    
    
  
  72.             xmlhttp = new XMLHttpRequest();
    73. 
  
    
    
  
  73.         }else{
    74. 
  
    
    
  
  74.             xmlhttp = new ActiveXObject('Microsoft XMLHTTP');
    75. 
  
    
    
  
  75.         }
    76. 
  
    
    
  
  76.         if(param.type.toLowerCase() == 'post'){
    77. 
  
    
    
  
  77.             // post方法传值需要设置请求头 get不用Content-Type:application/x-www-form-urlencoded
    78. 
  
    
    
  
  78.             xmlhttp.open(param.type, param.url, param.async);
    79. 
  
    
    
  
  79.             xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    80. 
  
    
    
  
  80.             xmlhttp.send(param.data);
    81. 
  
    
    
  
  81.         }else{
    82. 
  
    
    
  
  82.             if(param.url.indexOf('?') > -1){
    83. 
  
    
    
  
  83.                 xmlhttp.open(param.type, param.url + '&' + param.data , param.async);
    84. 
  
    
    
  
  84.             }else{
    85. 
  
    
    
  
  85.                 xmlhttp.open(param.type, param.url + '?' + param.data , param.async);
    86. 
  
    
    
  
  86.             }
    87. 
  
    
    
  
  87.             xmlhttp.send();
    88. 
  
    
    
  
  88.         }
    89. 
  
    
    
  
  89.         if(param.async){
    90. 
  
    
    
  
  90.             xmlhttp.onreadystatechange = function () {
    91. 
  
    
    
  
  91. //            ajax运行状态为4 已完成请求 并且请求成功
    92. 
  
    
    
  
  92.                 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    93. 
  
    
    
  
  93.                     // TODO
    94. 
  
    
    
  
  94.                     if(param.dataType == 'json'){
    95. 
  
    
    
  
  95.                         param.success(JSON.parse(xmlhttp.responseText));
    96. 
  
    
    
  
  96.                     }else{
    97. 
  
    
    
  
  97.                         param.success(xmlhttp.responseText)
    98. 
  
    
    
  
  98.                     }
    99. 
  
    
    
  
    100. 
  
    
    
  
  100.                 }else if(xmlhttp.readyState == 4 && xmlhttp.status != 200){
    101. 
  
    
    
  
  101.                     if(param.dataType == 'json'){
    102. 
  
    
    
  
  102.                         param.error(JSON.parse(xmlhttp.responseText));
    103. 
  
    
    
  
  103.                     }else{
    104. 
  
    
    
  
  104.                         param.error(xmlhttp.responseText)
    105. 
  
    
    
  
  105.                     }
    106. 
  
    
    
  
  106.                 }
    107. 
  
    
    
  
  107.             }
    108. 
  
    
    
  
  108.         }else{
    109. 
  
    
    
  
  109.             param.success(xmlhttp.responseText);
    110. 
  
    
    
  
  110.         }
    111. 
  
    
    
  
  111.     }
    112. 
  
    
    
  
  112. </script>
    113.


以上是关于原生js的ajax的主要内容，如果未能解决你的问题，请参考以下文章

AJAX原生JS代码

原生 JS Ajax,GET和POST 请求实例代码

原生JS写的ajax函数

JS原生Ajax

Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码

原生js 封装ajax请求超详细