Ajax通过在后台与服务器交换少量数据，可以使网页异步更新。下面这篇文章主要介绍Ajax异步请求的五个步骤以及实战案例的相关资料。通过示例代码介绍的非常详细，有需要的朋友可以参考一下。
目录
前言1。建立xmlHttpRequest异步对象2。创建HTTP请求(设置请求方法和URL)3。发送数据4。设置回调函数5。在回调函数中处理不同的响应状态。案例实现总结
前言
AJAX(异步JavaScript和XML):指的是一种用于创建交互式web应用程序的web开发技术。通过在后台与服务器交换少量数据，Ajax可以使网页异步更新。这意味着可以更新网页的一部分，而无需重新加载整个网页。
1.建立xmlHttpRequest异步对象
const xhr=new XMLHttpRequest()；
2.创建HTTP请求（设置请求方法和URL）
//获取模式
xhr.open('GET '，URL)；
//通过//post发送数据，需要设置请求头。
xhr.open('POST '，URL)；
xhr . setrequestheader(' Content-Type '，' application/x-www-form-urlencoded ')；
除了method和URL这两个必需参数之外，还有三个可选参数：flag、name和password。
Flag:参数值为布尔类型，用于指定是否使用异步模式。真表异步，假表同步，默认为真。
名称：
3.发送数据
//get不需要传递参数
xhr.send(空)；
//post必须有参数
xhr . send(' a=100 b=200 c=300 ')；
4.设置回调函数
xhr . onreadystatechange=callback；
5.在回调函数中对不同的响应状态进行处理
函数回调(){
//确定响应状态代码
if(xhr.readyState===4){
//确定交互是否成功
if(xhr . status=200 xhr . status 300){
//console . log(xhr . status)；//状态代码
//console . log(xhr . statustext)；//状态字符串
//console . log(xhr . getallresponseheaders())；//所有响应标头
//console . log(xhr . response)；//响应者
//获取服务器响应的数据
result . innerhtml=xhr . response；
}否则{
}
}
}
ajax中的readyState属性
0:未初始化。尚未调用open()方法。1:开始。已调用open()方法，但尚未调用send()方法。2:发送。已调用send()方法，但未收到任何响应。3:接收。已收到部分响应数据。4:搞定。所有响应数据都已收到，可以在客户端使用。
只有在XMLHttpRequest对象完成上述五个步骤后，才能获取服务器返回的数据。
ajax中的状态码（200-300则表示响应成功）
400:请求参数错误401:未授权访问404:访问的资源不存在。
案例实现
案例：获取天气信息
格式要求：使用HTML创建一个输入框和一个按钮。在输入框中输入单词并点击按钮后，您可以在下面打印未来15天的天气。
输出要求：每个天气要求：城市名称，温度，天气，风向，风力。
API网站：(https://www.apishop.net/#/)
APIKEY:**************
使用美元。get()获取：
var text=$('#text ')
var btn=$('#button ')
var div=$('#div1 ')
btn.click(function(){
var city=text.val()
var URL=' https://API . API shop . net/common/weather/get 15 daysweatherbyarea？apiKey=******='城市
$.获取(url，函数(响应){
console.log(响应)
var list=response . result . day list；
console.log(列表)
for(var I=0；i list.lengthi ){
div . append(“ul”)
div.append('li '列表[i].面积'/李')
div.append('li '列表[i].天_气温'/李')
div.append('li '列表[i].day_weather '/li ')
div.append('li '列表[i].天_风_方向'/李')
div.append('li '列表[i].天_风_力'/李')
div.append('/ul ')
}
}，' JSON ')
})
使用美元。post()获取：
var text=$('#text ')
var btn=$('#button ')
var div=$('#div1 ')
btn.click(function(){
var URL=' https://API . API shop . net/common/weather/get 15 daysweatherbyarea？apiKey=******area='
$.帖子(url，{
//传入所需的参数
area:text.val()
},函数（响应){
console.log(响应)
var列表=响应。结果。日列表；
console.log(列表)
for(var I=0；i list.lengthi ){
div。追加(“ul”)
附加('李'列表【我】。面积'/李)
附加('李'列表【我】。天_气温'/李)
附加('李'列表【我】。day_weather '/li ')
附加('李'列表【我】。天_风_方向'/李)
附加('李'列表【我】。天_风_力'/李)
div.append('/ul ')
}
}，' JSON ')
})
结果截图：
总结
到此这篇关于埃阿斯异步请求的五个步骤及实战案例的文章就介绍到这了，更多相关埃阿斯异步请求步骤内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。