ajax常用方法

xiaoxiao2021-03-25 97

一.什么是 AJAX？

1. AJAX = 异步 JavaScript 和XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

2.jQuery load() ：

语法：$(selector).load(URL,data,callback); jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象

实例：

$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });

3.AJAX get() 和 post() 方法

定义： jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求：GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。然后我们连同请求（name 和 url）一起发送数据。"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

实例：

$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });

4.ajaxComplete()

方法：ajaxComplete() 方法规定 AJAX 请求完成时运行的函数。定义：必需。规定当请求完成时运行的函数。额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项

5.getJSON() 方法：

$(selector).getJSON(url,data,success(data,status,xhr)) 语法： getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。定义：url：必需。规定将请求发送到哪个 URL data：可选。规定发送到服务器的数据。 success(data,status,xhr)：可选。规定当请求成功时运行的函数。额外的参数： data - 包含从服务器返回的数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）xhr - 包含 XMLHttpRequest 对象

6.ajaxError()

方法:$(document).ajaxError(function(event,xhr,options,exc)) 语法： function(event,xhr,options,exc): 定义：必需。规定当请求失败时运行的函数。额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项 exc - 包含 JavaScript exception

实例：当 AJAX 请求失败时，触发一个警告框：

$(document).ajaxError(function(){ alert("An error occurred!"); });

7.ajaxSend() 方法

$(document).ajaxSend(function(event,xhr,options)) 语法：ajaxSend() 方法规定 AJAX 请求即将发送时运行的函数。定义：必需。规定当请求成功时运行的函数。额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项

实例：当 AJAX 请求即将发送时，改变元素的内容：

$(document).ajaxSend(function(e,xhr,opt){ $("div").append("<p>Requesting: " + opt.url + "</p>"); });

8.param() 方法：$.param(object,trad)

语法：param() 方法创建数组或对象的序列化表示形式。定义：object：必需。规定要序列化的数组或对象 trad：可选。布尔值，指定是否使用参数序列化的传统样式

实例：实例：

输出序列化对象的结果： $("button").click(function(){ $("div").text($.param(personObj));});

9.ajaxStart() 方法：

语法：$(document).ajaxStart(function()) 定义：ajaxStart() 方法规定 AJAX 请求开始时运行的函数。

实例：当 AJAX 请求开始时，显示 “loading” 的指示：

$(document).ajaxStart(function(){ $(this).html("<img src='demo_wait.gif' />"); });

10.ajaxStop() 方法：

语法：$(document).ajaxStop(function()) 定义：ajaxStop() 方法规定所有的 AJAX 请求完成时运行的函数。 function()：必需。规定所有的 AJAX 请求完成时运行的函数

实例：当所有 AJAX 请求完成时，触发一个提示框：

$(document).ajaxStop(function(){ alert("All AJAX requests completed"); });

二.AJAX - 创建 XMLHttpRequest

对象：XMLHttpRequest 是 AJAX 的基础创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();

实例：

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 - 服务器响应

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

实例：

xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;

四.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status:状态码：200: "OK",404: 未找到页面

实例：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪： xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

五. Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

实例：

function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }

六.showCustomer() 函数

showCustomer() 函数执行以下任务：检查是否已选择某个客户创建 XMLHttpRequest 对象当服务器响应就绪时执行所创建的函数把请求发送到服务器上的文件请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

实例：

七.showHint() 函数

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。如果输入框不为空，showHint() 函数执行以下任务：创建 XMLHttpRequest 对象当服务器响应就绪时执行函数把请求发送到服务器上的文件请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

实例：

当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup"

事件触发：

转载请注明原文地址: https://ju.6miu.com/read-24621.html

技术

最新回复(0)