Ajax 是什么? 如何创建一个Ajax?

本文深入解析Ajax技术,从面试角度出发,详细介绍Ajax的工作原理、原生使用步骤及jQuery应用,强调异步请求对用户体验的重要性,适合前端开发者学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ajax 是在工作中是必用的技术,在面试中十有八九会问的,答题的思路最好先回答原生态Ajax使用的步骤,最后告诉面试官,我们在工作中是使用Jquery来实现Ajax请求和处理的。在回答的时候尽量详尽,包括方法的参数的个数,顺序和作用,以免被面试官抓住不放。不给面试官提问的机会,那你的回答就牛逼了!

Ajax是什么

我理解Ajax 是一种异步请求数据的一种技术,对于改善用户的体验和程序的性能很有帮助。

Ajax的使用

以下步骤,如果不能理解你死记硬背都要记下来,总比你答不出来要好吧!

1.创建Ajax核心对象XMLHttpRequest

var xmlhttp;
if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else{// 兼容 IE6, IE5
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求

xmlhttp.open(method,url,async);
send(string)

注意:open 的参数要牢记,很多面试官爱问这样的细节
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)

send(string)方法post请求时才使用字符串参数,否则不用带参数。

注意:post请求一定要设置请求头的格式内容

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");


3.服务器响应处理

responseText    获得字符串形式的响应数据。
responseXML   获得XML 形式的响应数据。

3.1 同步处理

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

直接在send()后面处理返回来的数据。

3.2 异步处理

异步处理相对比较麻烦,要在请求状态改变事件中处理。

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 &&xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

xmlhttp.status:响应状态码。这个也是面试比较爱问的,这个必须知道4个以上,比较常见的有:

200: "OK"

403   (禁止) 服务器拒绝请求。

404   (未找到) 服务器找不到请求的网页。

408  (请求超时) 服务器等候请求时发生超时。

500   (服务器内部错误)  服务器遇到错误,无法完成请求。

--------------------- 
原文:https://blog.csdn.net/lxcao/article/details/52745743 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值