AJAX JavScript原生异步通信

最新推荐文章于 2022-03-11 10:29:10 发布

weixin_44606322

最新推荐文章于 2022-03-11 10:29:10 发布

阅读量105

点赞数

分类专栏： AJAX 网页基础文章标签： JavaScript原生异步通信

本文链接：https://blog.csdn.net/weixin_44606322/article/details/89281789

版权

网页基础同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

什么是AJAX

异步的 JavaScript 和 XML，Asynchronous JavaScript and XML
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

JavaScript原生异步通信

创建对象

//ajax对象
var xmlHttp ;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
//老版本IE支持对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

状态监听

//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
document.getElementById("info").innerText=xmlHttp.responseText;
console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}

请求发送

// 第一个参数为请求类型 GET POST 第二个参数为请求位置URL 第三个参数为同步/异步
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send()

readyState五种状态：

0 －（未初始化）

(XMLHttpRequest)对象已经创建，但还没有调用open()方法。值为0表示对象已经存在，否则浏览器会报错：对象不存在。

1 －（载入/正在发送请求）

对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)，完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

2 －（载入完成/数据接收）

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示send()方法执行完成，已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

3 －（交互/解析数据）正在解析响应内容

此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。值为3表示正在解析数据。

4 －（后台处理完成）响应内容解析完成，可以在客户端调用了

此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

status 状态码：

常用：
200：请求成功（后台处理结果ok）、
303：重定向
400：请求错误、401：未授权、403：禁止访问、404：文件未找到
500：服务器错误

服务器响应

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

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含敏感字符的用户输入时，POST 比 GET 更稳定也更可靠

实现

GET：

<!--开发要认真 三思而后行 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript版本</title>
</head>
<body>
<button type="button" "asyncRequest()">异步请求</button>
<script type="text/javascript">
function asyncRequest()
{
console.log("异步请求");
//ajax对象
var xmlHttp ;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
//老版本IE支持对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
document.getElementById("info").innerText=xmlHttp.responseText;
console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}
xmlHttp.open("GET","http://localhost:3000?name=zzy",true);
xmlHttp.send()
}
function syncRequest()
{
console.log("同步请求");
}
</script>
</body>
</html>

POST：

<!--开发要认真 三思而后行 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript版本</title>
</head>
<body>
<button type="button" "asyncRequest()">异步请求</button>
<div id="info"></div>
<script type="text/javascript">
function asyncRequest()
{
console.log("异步请求");
//ajax对象
var xmlHttp ;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
//老版本IE支持对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
document.getElementById("info").innerText=xmlHttp.responseText;
console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}
xmlHttp.open("POST","http://localhost:3000",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("id=1&page=1")
}
function syncRequest()
{
console.log("同步请求");
}
</script>
</body>
</html>

weixin_44606322

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX JavScript原生异步通信

什么是AJAX异步的 JavaScript 和 XML，Asynchronous JavaScript and XMLAJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的...
复制链接

扫一扫