26_ajax原理.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. // ajax原理 他不能以file协议访问 他只能以http协议访问
  11. function ajaxFun(xhrType,xhrUrl,callBack) {
  12. // 第一步创建XMLHttpRequest对象
  13. var xhr = new XMLHttpRequest();
  14. // 第二步设置请求方式和请求地址 三个参数 第一个是请求方式 第二个是请求地址 第三个是是否异步
  15. xhr.open(xhrType, xhrUrl, true);
  16. // 第三步发送请求
  17. xhr.send();
  18. // 第四步注册回调函数 对请求结果进行处理
  19. xhr.onreadystatechange = function () {
  20. if (xhr.readyState == 4 && xhr.status == 200) {
  21. var res = JSON.parse(xhr.responseText)
  22. callBack(res);
  23. }
  24. }
  25. }
  26. //实现一下方法
  27. // ajaxFun("请求方式","请求地址","回调函数");
  28. // 当请求成功之后在回调函数中处理请求结果 讲结果转换成对象输出
  29. ajaxFun("GET","http://shop-api.edu.koobietech.com/prod/tagProdList",function (data) {
  30. console.log(data);
  31. });
  32. </script>
  33. </body>
  34. </html>