AJAX原理及应用

最新推荐文章于 2024-11-17 17:08:10 发布

我每天都在学习

最新推荐文章于 2024-11-17 17:08:10 发布

阅读量148

点赞数

分类专栏：前端文章标签：前端 AJAX JavaScript

本文链接：https://blog.csdn.net/ljh5920/article/details/103400681

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

AJAX是一种实现网页异步交互的技术，无需整个页面刷新即可更新内容。它通过XMLHTTPRequest对象与服务器通信，包括创建对象、设置请求、发送数据、处理响应和浏览器兼容性处理。AJAX的优点包括提升用户体验、减少后端负担，但也有破坏浏览器机制、安全问题等缺点。在实际应用中，库如axios和jQuery提供了更便捷的API。

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

AJAX介绍

AJAX（Asynchronous JavaScript and XML），异步的JavaScript和XML。它并不是单独的一门编程语言，而是在现有的Internet标准下，用于实现网页页面交互的技术。它可以在不重新加载整个页面的情况下与服务器进行交互后更新部分网页。其常见的应用场景是应用中的"点击或下拉加载更多"。

AJAX图解

AJAX原理

AJAX的工作原理是在客户端与服务器之间加了一个中间件（AJAX引擎（在浏览器内部一个用于处理用户请求，读取服务器，更改DOM内容的JavaScript应用）），其作用是使用户的操作与服务器相应异步化。并不是所有的请求都会发往服务器，一些数据验证和处理都会直接交由AJAX引擎来完成，若是确认需要从服务器获取数据再由AJAX引擎向服务器发送请求。

XMLHTTPRequest对象是AJAX的基础，它可以实现在后台从客户端发送数据，从服务器接受数据和不重新加载网页而更新网页。

XMLHTTPRequest对象中的属性：

属性	描述
onreadystatechange	当readyState状态属性改变时就会调用
readyState	XMLHTTPRequest状态由0到4变化（0：请求未初始化；1：服务连接已建立；2：请求已接收；3：请求处理中；4：请求已完成且响应就绪）
responseText	请求以文本形式返回响应
responseXML	请求以XML格式返回响应
status	将状态以数字形式返回（HTTP状态码（常见状态码：200请求成功；404无法根据请求找到资源））
statusText	以字符串形式返回状态（如Not Found;OK）

XMLHTTPRequest对象中的方法：

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	以字符串形式返回完整的HTTP标头集
getResponseHeader( headerName )	返回指定HTTP标头的值
open（method，URL，async，userName，password）	设置请求参数
send（content）	发送获取请求
setRequestHeader（ label，value）	将标签/值对添加到要发送的HTTP标头

AJAX应用

发送AJAX请求的主要五个步骤：
1.创建XMLHTTPRequest对象
2.使用open函数设置请求参数
3.使用send函数发送请求和数据
4.注册onreadystatechange事件，当状态改变时会调用
5.获取返回数据

浏览器版本兼容：

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

// 发送AJAX请求的主要五个步骤
var obj=new XMLHTTPRequest();//创建异步对象
obj.open(method,url,async);//open函数设置请求参数
obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//post请求需要添加此行
obj.send();//发送请求
obj.onreadystatechange=function(){   //注册事件，当状态改变时会调用此方法
    if(obj.readyState==4&&obj.status==200){  //保证数据完整请求回来的判断逻辑
    //自定义内容
    }
}

简单应用实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../test.js"></script>
</head>
<body>
<div id="text"></div>
<button id="changeme">
</body>
</html>

test.js:

document.getElementById("changme").onclick=littleTest
function littleTest(){
    var obj=new XMLHTTPRequest();
    obj.open("get",url,true);
    obj.send();
    obj.onreadystatechange=function(){
        if(obj.readyState==4&&obj.status==200){
        	document.getElementById("text").innerHTML=obj.responseText
        }
    }
}