Ajax异步请求的五个步骤及实战案例

AJAX（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下，对网页的局部进行更新。

1.建立xmlHttpRequest异步对象

1. const xhr=new XMLHttpRequest(); 

2.创建HTTP请求（设置请求方法和URL）

1. //get方式 
2. xhr.open('GET',URL); 
3.   
4. //post方式发送数据，需要设置请求头 
5. xhr.open('POST',URL); 
6. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 

除了method和URL两个必选参数外还有三个可选参数：flag,name,password

flag:参数值为布尔类型，用于指定是否用异步方式。true表异步，false表同步，默认为true。

name:

3.发送数据

1. //get不需要传递参数 
2. xhr.send(null); 
3.   
4. //post必须有参数 
5. xhr.send('a=100&b=200&c=300'); 

4.设置回调函数

1. xhr.onreadystatechange = callback； 

5.在回调函数中对不同的响应状态进行处理

1. function callback() { 
2.  //判断响应状态码 
3.  if(xhr.readyState===4){ 
4. // 判断交互是否成功 
5. if(xhr.status>=200&&xhr.status<300){ 
6.  // console.log(xhr.status);//状态码 
7.  // console.log(xhr.statusText);//状态字符串 
8.  // console.log(xhr.getAllResponseHeaders());//所有响应头 
9.  // console.log(xhr.response);//响应体 
10.   
11.  // 获取服务器响应的数据 
12.  result.innerHTML=xhr.response; 
13. }else{ 
14.   
15. } 
16. } 
17. } 

ajax中的readyState属性

0：未初始化。尚未调用 open()方法。1：启动。已经调用 open()方法，但尚未调用 send()方法。2：发送。已经调用 send()方法，但尚未接收到响应。3：接收。已经接收到部分响应数据。4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。

ajax中的状态码（200-300则表示响应成功）

400：请求参数错误401：无权限访问404：访问的资源不存在

案例实现

案例：获取天气信息

格式要求：使用HTML创建一个输入框，一个按钮，在输入框中输入文字后点击按钮，即可在下面打印未来15天的天气

输出要求：每个天气要求：城市名，温度，天气，风向，风力

API网站：(https://www.apishop.net/#/)

APIKEY：***************

使用 $.get( ) 获取：

1. var text = $('#text') 
2. var btn = $('#button') 
3. var div = $('#div1') 
4. btn.click(function(){ 
5. var city = text.val() 
6. var url = "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=******="+ city 
7.  
8. $.get(url, function(response){ 
9. console.log(response) 
10. var list = response.result.dayList; 
11. console.log(list) 
12. for(var i = 0; i < list.length; i++){ 
13. div.append("<ul>") 
14. div.append("<li>" + list[i].area + "</li>") 
15. div.append("<li>" + list[i].day_air_temperature + "</li>") 
16. div.append("<li>" + list[i].day_weather + "</li>") 
17. div.append("<li>" + list[i].day_wind_direction + "</li>") 
18. div.append("<li>" + list[i].day_wind_power + "</li>") 
19. div.append("</ul>") 
20. } 
21.  
22. }, "JSON") 
23. }) 

使用 $.post( ) 获取：

1. var text = $('#text') 
2. var btn = $('#button') 
3. var div = $('#div1') 
4. btn.click(function(){ 
5. var url = "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=******&area=" 
6.  
7. $.post(url,{ 
8. // 传入必须的参数 
9. area:text.val() 
10. }, function(response){ 
11. console.log(response) 
12. var list = response.result.dayList; 
13. console.log(list) 
14. for(var i = 0; i < list.length; i++){ 
15. div.append("<ul>") 
16. div.append("<li>" + list[i].area + "</li>") 
17. div.append("<li>" + list[i].day_air_temperature + "</li>") 
18. div.append("<li>" + list[i].day_weather + "</li>") 
19. div.append("<li>" + list[i].day_wind_direction + "</li>") 
20. div.append("<li>" + list[i].day_wind_power + "</li>") 
21. div.append("</ul>") 
22. } 
23.  
24. }, "JSON") 
25. }) 

结果截图：