AJAX应用场景、运行原理及实现步骤

最新推荐文章于 2023-11-21 13:31:26 发布

csdn_0927

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量526

点赞数 2

分类专栏：前端文章标签： ajax ajax原理 ajax实现步骤 ajax应用

本文链接：https://blog.csdn.net/CSDN_0927/article/details/102620607

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Ajax

Ajax应用场景

主要用于在不刷新页面的情况下，与服务器进行数据交换并更新页面

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

Ajax运行原理

Ajax相当于浏览器与服务器之间的代理，类似于通信兵的作用，浏览器通过Ajax代理向服务器端发送请求，服务器端也通过Ajax端响应请求，而这个过程也被Ajax所代理。浏览器端则不需要一直等待服务器端数据的响应，用户可以继续拉动页面浏览网页，当响应结束后，再将数据添加到页面上，所以这个过程一般都是异步的。

Ajax实现步骤

一、创建XMLHttpRuquest对象(考虑兼容性)，创建一个异步调用对象

不同浏览器创建XMLHttpRequest对象方式有所不同。

在chorme浏览器、firefox等浏览器创建XMLHttpRequest对象的方式如下所示：

var xmlHttpRuquest = new XMlHttpRequest()

在IE浏览器中创建XMLHttpRequest对象的方式如下所示：

var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

<script type="text/javascript">
	    var xmlHttpRequest ; //定义一个变量，用于存放XMLHttpRequest对象
	
		if(window.ActiveXObject){   //判断是否是IE浏览器
			xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP')   //创建IE浏览器中的XMLHttpRequest对象
		}else if(window.XMLHttpRequest)   //判断是否为其他浏览器
		{
			xmlHttpRequest = new XMLHttpRequest();  //创建其他浏览器上的XMLHttpRequest对象
		}

二、创建HTTP请求

创建HTTP请求使用XMLHttpRuquest对象的open()方法，代码如下

XMLHttpRequest.open(method,URL,flag)

参数解释如下：

method：用于指定HTTP请求的方法，一共有get、post、head、put、delete五种方法，常用的方法有get和post。

URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL

flag：参数值为布尔值。true表示异步，false则表示同步，默认为true

<script type="text/javascript">
 xmlHttpRequest.open('get','http://localhost:3000/first',true)

三、设置响应HTTP请求状态变化的函数

创建HTTP请求之后，就可以将HTTP请求发送给服务器，从创建XMLHttpRequest对象开始，到发送数据、接收数据，XMLHttpRequest对象将经过5个状态。

状态	未初始化状态	初始化状态	发送数据状态	接收数据状态	完成状态
readyState属性值	0	1	2	3	4
特征	在创建完XMLHttpRequest对象时	在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时	在初始化XMLHttpRequest对象后，使用send()方法发送数据时	Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果	XMLHttpRequest对象接收数据完毕后，进入完成状态

XMLHttpRequest对象可以响应readystatechange事件，此事件在XMLHttpRequest对象状态发生改变时(readyState属性值改变时)触发。因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用 responseText 属性或 responseXml 属性来获取数据。

四、设置获取服务器返回数据的语句

如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。异步调用过程完毕，不代表异步调用成功·，判断异步调用成功，需要先判断XMLHttpRequest对象的status属性值是否是200

 <script type="text/javascript">
function getData(){
	//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4则表示异步调用完成
	if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
     console.log(xmlHttpRequest.responseText); //通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
	}

五、发送HTTP请求

设置之后，就可以向服务器端发送HTTP请求了。通过XMLHttpRequest对象的send()方法

<script type="text/javascript">  
 xmlHttpRequest.send();

XMLHttpRequest.send(data)

get请求数据在url中，所以此处可以使用null替代

post请求data参数的格式与在URL中传递参数的格式类似，如：name=Kobe&champion=5。post请求必须设置请求头，如下：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。

<script type="text/javascript"> 
var params = 'name=kobe&champion=5';
    xmlHttpRequest.open('post','http://localhost:3000/post',true)
    xmlHttpRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlHttpRequest.send(params);

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
</head>
<body>
<script type="text/javascript">
	    var xmlHttpRequest ; //定义一个变量，用于存放XMLHttpRequest对象
	
		if(window.ActiveXObject){   //判断是否是IE浏览器
			xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP')   //创建IE浏览器中的XMLHttpRequest对象
		}else if(window.XMLHttpRequest)   //判断是否为其他浏览器
		{
			xmlHttpRequest = new XMLHttpRequest();  //创建其他浏览器上的XMLHttpRequest对象
		}
		// xmlHttpRequest = new XMLHttpRequest(); 
	
	
  
    xmlHttpRequest.open('get','http://localhost:3000/first',true) //使用XMLHttpRequest对象的open()方法创建HTTP请求，请求方法为get
    xmlHttpRequest.send();

  xmlHttpRequest.onreadystatechange = getData;  //当XMLHttpRequest对象状态改变时调用这个函数
  function getData(){
	//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4则表示异步调用完成
	if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
     console.log(xmlHttpRequest.responseText); //通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
	}

}

</script>
	
</body>
</html>

csdn_0927

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
AJAX应用场景、运行原理及实现步骤

AjaxAjax应用场景主要用于在不刷新页面的情况下，与服务器进行数据交换并更新页面页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉列表Ajax运行原理Ajax相当于浏览器与服务器之间的代理，类似于通信兵的作用，浏览器通过Ajax代理向服务器端发送请求，服务器端也通过Ajax端响应请求，而这个过程也被Ajax所代理。浏览器端则不需要一直...
复制链接

扫一扫