AJAX基础

内容：

1.什么是AJAX

2.如何使用AJAX

3.将AJAX封装成函数

4.AJAX其余封装

5.AJAX同步与异步

6.jQuery中Ajax方法的使用

 

 

 

1.什么是AJAX

AJAX 是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术

AJAX = Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求

AJAX 是一种用于建立快速动态网页的技术，经过在后台与服务器进行少许数据交换，使网页实现异步更新。这意味着能够在不重载整个页面的状况下，对网页的某些部分进行更新。

而传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个页面。

AJAX 最大的优势是在不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。（这一特色给用户的感觉是在不知不觉中完成请求和响应过程）

 

 

2.如何使用AJAX

用JavaScript写一个完整的AJAX代码并不复杂，可是须要注意：AJAX请求是异步执行的，也就是说，要经过回调函数得到响应

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

 1 // GET
 2 // 1.建立 AJAX 对象
 3 var r = new XMLHttpRequest()
 4 // 2.链接 - 设置请求方法和请求地址
 5 r.open('GET', '/login', true)
 6 // 3.发送请求
 7 r.send()
 8 // 4.接受响应
 9 r.onreadystatechange = function() {
10     console.log('state change: ', r)
11 }
12 
13 
14 // POST
15 // 1.建立 AJAX 对象
16 var r = new XMLHttpRequest()
17 // 2.链接 - 设置请求方法和请求地址
18 r.open('POST', '/login', true)
19 // 3.设置发送的数据的格式
20 r.setRequestHeader('Content-Type', 'application/json')
21 // 4.发送请求
22 var account = {
23     username: 'gua',
24     password: '123',
25 }
26 var data = JSON.stringify(account)
27 r.send(data)
28 // 5.接受响应
29 r.onreadystatechange = function() {
30     if (r.readyState === 4) {
31         console.log('state change: ', r, r.status, r.response)
32         // 转换格式
33         var response = JSON.parse(r.response)
34         console.log('response', response)
35     } else {
36         console.log('change')
37     }
38 }

 

固然咱们也能够把上述过程封装一下：

1 var ajax = function(method, path, data, responseCallback) {
2     // method是请求方法(GET or POST) path是请求路径 
3     // data是发送的数据(对象类型) responseCallback是响应函数
4 
5 
6 }

注意：

• method是请求方法，通常是GET or POST
• path是请求路径，通常不能跨域请求
• data是发送到服务端的数据，是字符串或列表格式
• responseCallback是回调函数，此回调函数将在服务器响应后调用，通常给此回调函数传入服务器响应数据，而后回调函数中的代码其实是前端操做页面(增删改查)的代码

 

 

3.将AJAX封装成函数

 1 /*
 2  ajax 函数
 3 */
 4 var ajax = function(method, path, data, reseponseCallback) {
 5     var r = new XMLHttpRequest();
 6     // 设置请求方法和请求地址
 7     r.open(method, path, true);
 8     // 设置发送的数据的格式为 application/json
 9     // 这个不是必须的
10     r.setRequestHeader('Content-Type', 'application/json');
11     // 注册响应函数
12     r.onreadystatechange = function() {
13         if(r.readyState === 4) {
14             // r.response 存的就是服务器发过来的放在 HTTP BODY 中的数据
15             reseponseCallback(r.response);
16         }
17     };
18     // 把数据转换为 json 格式字符串
19     data = JSON.stringify(data);
20     // 发送请求
21     r.send(data);
22 };

 

 

4.AJAX其余封装

AJAX其余封装方法以下：

 1 // AJAX的GET方法 
 2 var ajaxGet = function(url, callback) {
 3     /*
 4         实现 ajaxGet 函数, 用 GET 方法请求一个 URL
 5         url 是一个 URL
 6         callback 是一个函数, 在接受服务器响应后调用并传递参数给它
 7     */
 8     var r = new XMLHttpRequest()
 9     r.open('GET', url, true)
10     // 设置发送的数据的格式为 application/json (API要求就要设置 不要求就不用设置)
11     r.setRequestHeader('Content-Type', 'application/json');
12     r.onreadystatechange = function(event) {
13         if(r.readyState === 4) {
14             // r.response是服务端响应的数据
15             callback(r.response)
16         }
17     }
18     r.send()
19 }
20 
21 
22 // AJAX的POST方法 
23 var ajaxPost = function(url, data, callback) {
24     /*
25         实现 ajaxPost 函数, 用 POST 方法向一个 URL 提交数据
26         url 是一个 URL  data 是提交到服务器的数据
27         callback 是一个函数, 在接受服务器响应后调用并传递参数给它
28     */
29     var r = new XMLHttpRequest()
30     r.open('GET', url, true) 
31     // 设置发送的数据的格式为 application/json (API要求就要设置 不要求就不用设置)
32     r.setRequestHeader('Content-Type', 'application/json');
33     r.onreadystatechange = function(event) {
34         if(r.readyState === 4) {
35             // r.response是服务端响应的数据
36             callback(r.response)
37         }
38     }
39     // 把数据转换为 json 格式字符串 -> 字典转换成字符串
40     data = JSON.stringify(data)
41     r.send(data)
42 }
43 
44 
45 // AJAX参数所有封装成一个request对象
46 var ajax = function(request) {
47     /*
48     request 是一个 object, 有以下属性
49         method, 请求的方法, string
50         url, 请求的路径, string
51         data, 请求发送的数据, 若是是 GET 方法则没这个值, string
52         callback, 响应回调, function
53         contentType , 提交数据的类型, API要求就要指定
54     */
55     var r = new XMLHttpRequest()
56     r.open(request.method, request.url, true)
57     if (request.contentType !== undefined) {
58         r.setRequestHeader('Content-Type', request.contentType)
59     }
60     r.onreadystatechange = function(event) {
61         if(r.readyState === 4) {
62             request.callback(r.response)
63         }
64     }
65     if (request.method === 'GET') {
66         r.send()
67     } else {
68         r.send(request.data)
69     }
70 }
71 
72 // ajax函数的使用实例
73 var account = {
74     'username': 'xiaogua',
75     password: '123'
76 }
77 var data = JSON.stringify(account)
78 var r = {
79     method: 'POST',
80     url: '/login',
81     contentType:  'application/json',
82     data: data,
83     callback: function(response) {
84         console.log('响应', response)
85         var res = JSON.parse(response)
86         if (res.success) {
87             window.location.href = '/'
88         } else {
89             alert('登陆失败')
90         }
91     }
92 }
93 ajax(r)

 

 

5.AJAX同步与异步

AJAX同步与异步：上述open方法的第三个参数为true或false，true表示使用异步请求，而false表示使用同步请求，通常AJAX都使用异步请求也就是说AJAX的open方法第三个参数通常设置为true！

关于同步与异步：

• 同步是指：发送方发出数据后，等接收方发回响应之后才发下一个数据包的通信方式
• 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通信方式

同步请求:  客户端请求(等待)->服务端处理->响应->页面载入（缺乏对象:XMLhttpRequest） 这时候若是有错误，只能再次发送请求，再次等待

异步请求：好比当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器作处理和响应，获得你的邮箱地址填写重复了，把响应结果发给页面，在这个过程当中你仍然能够填写其余内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并无从新刷你的页面，全部的填写错误会实时的显示出来，你也会实时的更正。这个过程当中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的

使用异步请求页面上的操做和服务器端的操做互相之间不会形成阻塞

 

面试题 - 创建一个异步请求的过程：

1. new一个XHR对象
2. 调用open方法
3. send一些数据
4. 对过程进行监听，来知道服务器是否是正确地作出了响应，接着能够作一些事情好比说向页面中插入元素(提示信息、成功信息等)

 

 

6.jQuery中Ajax方法的使用

使用以前引用jQuery，而后写下如下代码便可：

 1 $.ajax({
 2     type : "post",  // 向后台请求的方式，有post，get两种方法 不写默认为get
 3     url : "xxx",    // url填写的是请求的路径
 4     cache : false,  // 缓存是否打开
 5     data : {  
 6         "name" : "xxx",
 7         "age" : 22
 8     },  // 请求的数据
 9     dataType : 'json',  // 请求的数据类型
10     success : function(data) {  // 请求的返回成功的方法
11         xxx
12     },
13     error : function(XMLHttpRequest, textStatus, errorThrown) {
14             alert(textStatus);
15             alert("失败了"+errorThrown)
16         }
17 });