文章摘要
这篇文章介绍了Ajax技术的基本概念及其在网页开发中的应用。Ajax是一种通过异步操作更新网页的技术，可以避免重新加载整个页面。文章详细讲解了如何使用XMLHttpRequest对象实现异步请求，包括设置请求方法（GET和POST）、发送数据、设置回调函数以及处理不同的响应状态码（如200-300表示成功，4表示发送，404表示错误状态等）。文章还通过一个实际案例展示了如何在HTML页面中实现天气信息的实时更新，具体包括使用JavaScript调用API获取数据，并通过DOM操作动态显示结果。文章的总结部分突出了Ajax的核心思想：通过异步操作实现高效的网页交互。
目录前言1.建立xmlHttpRequest异步对象2.创建HTTP请求（设置请求方法和URL）3.发送数据4.设置回调函数5.在回调函数中对不同的响应状态进行处理案例实现总结
AJAX（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下，对网页的局部进行更新。
const xhr=new XMLHttpRequest();
//get方式
xhr.open(‘GET’,URL);
//post方式发送数据，需要设置请求头
xhr.open(‘POST’,URL);
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
除了method和URL两个必选参数外还有三个可选参数：flag,name,password
flag:参数值为布尔类型，用于指定是否用异步方式。true表异步，false表同步，默认为true。
name:
//get不需要传递参数
xhr.send(null);
//post必须有参数
xhr.send(‘a=100&b=200&c=300’);
xhr.onreadystatechange=callback；
function callback() {
//判断响应状态码
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;
}else{
}
}
}
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( ) 获取：
var text=$(‘#text’)
var btn=$(‘#button’)
var div=$(‘#div1’)
btn.click(function(){
var city=text.val()
var url=”https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=******=”+ city
$.get(url, function(response){
console.log(response)
var list=response.result.dayList;
console.log(list)
for(var i=0; i < list.length; i++){
div.append(“<ul>”)
div.append(“<li>” + list[i].area + “</li>”)
div.append(“<li>” + list[i].day_air_temperature + “</li>”)
div.append(“<li>” + list[i].day_weather + “</li>”)
div.append(“<li>” + list[i].day_wind_direction + “</li>”)
div.append(“<li>” + list[i].day_wind_power + “</li>”)
div.append(“</ul>”)
}
}, “JSON”)
})
使用 $.post( ) 获取：
var text=$(‘#text’)
var btn=$(‘#button’)
var div=$(‘#div1’)
btn.click(function(){
var url=”https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=******&area=”
$.post(url,{
// 传入必须的参数
area:text.val()
}, function(response){
console.log(response)
var list=response.result.dayList;
console.log(list)
for(var i=0; i < list.length; i++){
div.append(“<ul>”)
div.append(“<li>” + list[i].area + “</li>”)
div.append(“<li>” + list[i].day_air_temperature + “</li>”)
div.append(“<li>” + list[i].day_weather + “</li>”)
div.append(“<li>” + list[i].day_wind_direction + “</li>”)
div.append(“<li>” + list[i].day_wind_power + “</li>”)
div.append(“</ul>”)
}
}, “JSON”)
})
结果截图：
到此这篇关于Ajax异步请求的五个步骤及实战案例的文章就介绍到这了,更多相关Ajax异步请求步骤内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:ajax异步请求详解浅谈js的ajax的异步和同步请求的问题原生JavaScript实现Ajax异步请求解决ajax异步请求返回的是字符串问题