Ajax方法

Ajax方法

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： JQ 作者：胡水旺

撰写时间：2021/7/18

一、jQuery-Ajax 方法

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现对部分网页的更新。

1、简介

Ajax=异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页进行显示。

jQuery 提供多个与 AJAX 有关的方法：通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON-同时能够把这些外部数据直接载入网页的被选元素中。

2、Js-Ajax

通过利用 Ajax，您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。

通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面，用户可以停留在同一个页面，他或她不会注意到脚本在后台请求页面，或向服务器发送数据。

3、XMLHttpRequest 对象

通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面。

4、AJAX-XMLHttpRequest 对象创建 XMLHttpRequest 对象的语法： variable=new XMLHttpRequest();

老版本的 InternetExplorer(IE5 和 IE6)使用 ActiveX 对象 variable=new ActiveXObject("Microsoft.XMLHTTP");

$("#btn").click(functon(){

//创建 XMLHttpRequest 对象 var xhr

});

5、AJAX-向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open（）和 Send（）方法：

XMLHttp.open("method","url",async);

//参数：method：请求方式（get/post）

//url:请求路径

//async:是否异步默认：true（异步）false（同步）

//XMLHttp.send();直接发送请求

俩种 HTTP 请求方法:GET 和 POST：

get-从指定的资源请求数据 post-向指定的资源提交要处理的数据。

GET 方法： get 请求可能被缓存； get 请求可被收藏为书签； get 请求不应该在处理敏感数据时使用；

POST 方法： post 请求不会被缓存； post 请求不会被保留在浏览器历史记录中； post 不能被收藏为书签； post 请求对数据长度没有要求；

6、AJAX-服务器响应如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 responseText 获得字符串形式的响应数据。

四、AJAX-onreadystatechange 事件 onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中 4：请求已完成，且响应已就绪

status{200:OK

404:未找到页面}

XMLHttp.onreadystatechange=function()

{

console.log(XMLHttp.readyState);

}

7、发送请求

XMLHttp.send();

8、onload 请求成功时触发的事件

οnlοad=function(){

$("#p1").text(xhr.responseText);