AJAX 知识总结

Posted 2021-04-15 CodeHlsn

AJAX = AsynchronousJavaScript and XML（异步的javascript和XML）

先解释一下同步和异步的概念：

同步：发送的一方发送数据后，必须等待接收方返回响应才能继续发下一个数据的通讯方式

客户端发起请求 --> 服务器处理 --> 客户端接受响应 --> 页面载入

异步：发送的一方发送数据后，不等接受方返回响应，就可以接着发送下个数据的通讯方式

异步的一种应用场景：

AJAX不是一门新的编程语言，而是一种使用现有标准的新方法

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

它是综合了很多技术的浏览器网页开发技术，这些技术包括：

JavaScript、Xhtml和CSS、DOM、XML和XMLHttpRequest.

一个完整的HTTP请求包含以下步骤：

• 建立TCP连接
• 浏览器向服务器发送请求命令
• 浏览器向服务器发送请求头信息
• 服务器应答
• 服务器发送应答头信息
• 服务器向浏览器发送数据
• 服务器关闭TCP连接

HTTP请求的方法：

GET ：一般用于信息的获取，使用URL传递参数，但是对发送信息的数量有限制

POST ：一般用于修改服务器端的数据，比如：增、删、改以及发送表单数据

HTTP响应一般有三部分组成：

状态码，用来显示请求是成功还是失败

响应头：包含一些服务器类型、内容类型等

响应体：响应正文

Ajax的实现过程：

1、JavaScript监听浏览页的网页事件：点击、提交、更改等

2、JavaScript创建Ajax引擎对象：

XMLHttpRequest就是Ajax的基础，现代所有的浏览器均支持

XMLHttpRequest 用于在后台与服务器交换数据。

创建 XMLHttpRequest对象的一般语法:

XMLHttp = new XMLHttpRequest();

3、通过Ajax引擎对象发出请求：

XMLHttp.open("GET","test.txt",true)

‍

open（method，url，async）

method：请求的类型，GET或者是POST

url：文件在服务器的位置

async：true（异步）或者 false（同步）

XMLHttp.send(String)

send（string）string：仅仅用于POST请求

4、Ajax引擎接收服务器的响应内容

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

document.getElementById("Div").innerHTML=XMLHttp.responseText

responseXML           获得XML形式的响应数据

XMLDoc=XMLHttp.responseXML;txt="";D=XMLDoc.getElementByTagName("TEST");for(var i=0;i<D.length;i++){  txt+=D[i].childNode[0].nodeValue;}document.getElementById("Div").innerHTML=txt;

5、JavaScript从Ajax对象中获取响应内容，通过dom改变网页的显示效果

jQuery ajax() 方法

$("button").click(function(){    $.ajax({url:"test.txt",success:function(data){     $("#div").html(data);    } })})

一般语法为：

$.ajax({key:value,key:value,key:value,...........})

Ajax的优点：

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。