Ajax基础以及封装(一)

 

 

 

 

 

 

 1     <script type="text/javascript">
 2         // 1.创建ajax对象
 3         var xhr = new XMLHttpRequest();
 4         // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
 5         // 1)请求方式 2)请求地址
 6         xhr.open('get', 'http://localhost:3000/first');
 7         // 3.发送请求
 8         xhr.send();
 9         // 4.获取服务器端响应到客户端的数据
10         xhr.onload = function (){
11             console.log(xhr.responseText)
12         }
13     </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

xhr.readyState // 获取Ajax状态码

 

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

 

 

 

 

 

 

xhr.open('get', 'http://www.example.com?t=' + Math.random());

 1 function ajax (options) {
 2     // 默认值
 3     var defaults = {
 4         type: 'get',
 5         url: '',
 6         async: true,
 7         data: {},
 8         header: {
 9             'Content-Type': 'application/x-www-form-urlencoded'
10         },
11         success: function () {},
12         error: function () {}
13     }
14     // 使用用户传递的参数替换默认值参数
15     Object.assign(defaults, options);
16     // 创建ajax对象
17     var xhr = new XMLHttpRequest();
18     // 参数拼接变量
19     var params = '';
20     // 循环参数
21     for (var attr in defaults.data) {
22         // 参数拼接
23         params += attr + '=' + defaults.data[attr] + '&';
24         // 去掉参数中最后一个&
25         params = params.substr(0, params.length-1)
26     }
27     // 如果请求方式为get
28     if (defaults.type == 'get') {
29         // 将参数拼接在url地址的后面
30         defaults.url += '?' + params;
31     }
32 
33     // 配置ajax请求
34     xhr.open(defaults.type, defaults.url, defaults.async);
35     // 如果请求方式为post
36     if (defaults.type == 'post') {
37         // 设置请求头
38         xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
39         // 如果想服务器端传递的参数类型为json
40         if (defaults.header['Content-Type'] == 'application/json') {
41             // 将json对象转换为json字符串
42             xhr.send(JSON.stringify(defaults.data))
43         }else {
44             // 发送请求
45             xhr.send(params);
46         }
47     } else {
48         xhr.send();
49     }
50     // 请求加载完成
51     xhr.onload = function () {
52         // 获取服务器端返回数据的类型
53         var contentType = xhr.getResponseHeader('content-type');
54         // 获取服务器端返回的响应数据
55         var responseText = xhr.responseText;
56         // 如果服务器端返回的数据是json数据类型
57         if (contentType.includes('application/json')) {
58             // 将json字符串转换为json对象
59             responseText = JSON.parse(responseText);
60         }
61         // 如果请求成功
62         if (xhr.status == 200) {
63             // 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
64             defaults.success(responseText, xhr);
65         } else {
66             // 调用失败回调函数并且将xhr对象传递给回调函数
67             defaults.error(responseText, xhr);
68         } 
69     }
70     // 当网络中断时
71     xhr.onerror = function () {
72         // 调用失败回调函数并且将xhr对象传递给回调函数
73         defaults.error(xhr);
74     }
75 }

 

  官方地址： https://aui.github.io/art-template/zh-cn/index.html

  使用步骤

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- 1. 将模板引擎的库文件引入到当前页面 -->
 7     <script src="/js/template-web.js"></script>
 8 </head>
 9 <body>
10     <div id="container"></div>
11     <!-- 2.准备art-template模板 -->
12     <script type="text/html" id="tpl">
13         <h1>{{username}} {{age}}</h1>
14     </script>
15     <script type="text/javascript">
16         // 3.告诉模板引擎将那个数据和哪个模板进行拼接
17         // 1) 模板id 2)数据 对象类型
18         // 方法的返回值就是拼接好的html字符串
19         var html = template('tpl', {username: 'zhangsan', age: 30});
20         document.getElementById('container').innerHTML = html;
21     </script>
22 </body>
23 </html>
posted @ 2020-05-22 17:32  不忘初心l  阅读(58)  评论(0)    收藏  举报