AJAX异步请求

Posted 2021-03-16 秦明科

ajax英文全名：Asynchronus javascript and XML 异步的javaScripyt和xml

　　1异步和同步：客户端和服务端相互通信的基础上，

　　　　　　　　同步：当客户端给服务端发送请求时，只有单服务端给出响应后，客户端才会进行下一步的操作。（客户端会等待服务端）

　　　　　　　　异步：当客户端给服务发送请求后，客户端不会等待服务端的响应，此时客户端可以进行其他操作，当服务做出响应时，客户端才会进行下一步操作（客户端不会等待服务端的响应。）

 

　　Ajax 是一种无序重新加载整个页面，能够更新部分网页的技术。

　　通过后台与服务器进行少量的数据交换，ajax可以使网页实现异步更新，这意味着可以在不重新加载整个页面的情况下，对网页的某部分内容进行更新

　　如果不适用ajax请求后台数据，需要对整个网页进行更新。　　

　　因此使用ajax可以提升用户的体验。

　　实现方式:

　　　　这种方式是原生的实现方式

　　　　//1创建核心对象

　　　　　　var xmlHttp;

　　　　if(window.xmlhttpRequest)

　　　　

　　　　{// code for IE7+, Firefox, Chrome, Opera, Safari
　　　　xmlhttp=new XMLHttpRequest();
　　　　}

　　　　else
　　　　{

　　　　//对ie浏览器做的一个适配

　　　　// code for IE6, IE5
　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　　}

　　2//建立连接　　

　　　　/*

　　　　请求参数

　　　　1请求方式,get post等

　　　　2请求的url,服务地址

　　　　3同步或者异步 同步false ,异步true

　　　　*/

　　　　xmlHttp.open("get","servletTest/hello?username=zhangsan",true)；

　　　　//发送请求

　　　　xmlHttp.send();

 

　　　　//4接收并处理请求结果

　　　　　　//获取方式：xmlhttp.responseText

　　　　//获取时机（当服务器返回结果后在进行获取）

　　//当xmlHttp对象的就绪状态改变时，触发onreadystatechange()函数

　　　　xmlhttp.onreadystatechange=function()
　　　　{
　　　　//判断readyState就绪状态是否为4，判断status响应状态码是否为200
　　　　if (xmlhttp.readyState==4 && xmlhttp.status==200)
　　　　{
　　　　//获取服务器的响应结果
　　　　var responseText = xmlhttp.responseText;
　　　　alert(responseText);
　　　　}

jQuery实现方式

　　　　$符号代理真个jquery对象

　　　　$.ajax()

　　　　语法

　　　　$.ajax({键值对})

 

　　　　//使用$.ajax发送异步请求

　　　　　　$.anax({

　　　　　　url："servlettest/hello"  ，  //请求的url

　　　　　　type："post"  ，//请求的方式

　　　　　　//data:"username=zhansgan&age=18" ，get方式传递参数

　　　　　　data:{

　　　　　　　　　　"username":zhangsan

　　　　　　　　　　age：18

　　　　　　　　}，

　　　　　　success：function(data){   //响应成功后执行的参数  data，为响应回来的数据

　　　　　　　　}

　　　　})

}

　　还有直接对get和post方式进行请求，这里就不进行一一介绍了。

　　　　$post("url","“请求参数，funcatin(),响应的结果类型)

 

　　现在最流行的应该是axsor方法进行异步请求

　　　　　axiosr方式

　　　axisor.post("请求的url"，请求的参数可以为json格式，).then((res)=>{//请求成功的回调

 

 

　　}).catch((erro)=>{//请求失败的回调

 

　　})

　　　　　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Asynchronous javaScript and XML 异步的JavaSCript和xml