前端与服务端交互：AJAX

最新推荐文章于 2024-11-18 11:56:41 发布

MSB4011

最新推荐文章于 2024-11-18 11:56:41 发布

阅读量92

点赞数

分类专栏：网站搭建文章标签：前端

原文链接：https://www.runoob.com/ajax/ajax-example.html

版权

网站搭建专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AJAX是一种利用JavaScript与服务器进行异步数据交换的技术，主要涉及XHR对象。通过创建XHR对象，发送GET或POST请求，并处理服务器返回的数据来实现页面无刷新更新。当readyState改变且状态为4（完成）且status为200（成功）时，可获取并处理响应数据。

摘要由CSDN通过智能技术生成

AJAX是前端JS脚本与服务端交互的通用方式之一，该方式主要依赖于XHR(XmlHttpRequest)对象的使用，大体来看氛围一下几个步骤：

Step 1：根据浏览器创建XHR对象

不同的浏览器支持的对象并不一样，具体代码如下：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Step 2: 请求对应的服务端API

1. Get请求的发送

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

2. Post请求发送

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

Step 3: 处理服务器返回的数据

1. 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

2. 当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息，下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"
404: 未找到页面

具体服务端返回数据的处理可以如下代码所示：

xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();