ajax笔记

最新推荐文章于 2023-12-10 15:33:03 发布

Fighting_No1

最新推荐文章于 2023-12-10 15:33:03 发布

阅读量536

点赞数

分类专栏： web前端文章标签： javascript ajax jquery web

本文链接：https://blog.csdn.net/Fighting_No1/article/details/79314018

版权

web前端专栏收录该内容

45 篇文章 4 订阅

订阅专栏

ajax笔记

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

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest

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

XMLHttpRequest 对象是开发者的梦想，因为您能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

XMLHttpRequest 对象方法

方法	描述
abort()	取消当前的请求。
getAllResponseHeaders()	返回头信息。
getResponseHeader(header)	返回指定的头信息。
open(method,url,async,uname,pswd)	规定请求的类型，URL，请求是否应该进行异步处理，以及请求的其他可选属性。 method：请求的类型：GET 或 POST async：true（异步）或 false（同步）
send(string)	发送请求到服务器。 string：仅用于 POST 请求
setRequestHeader(header,value)	把标签/值对添加到要发送的头文件。

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用。
readyState	存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化（还没有调用 open()） 1：服务器建立连接（还没有调用 send()） 2：收到的请求（通常现在可以从响应中获取内容头） 3：处理请求 4：请求完成和响应准备就绪
responseText	返回作为一个字符串的响应数据。
responseXML	返回作为 XML 数据响应数据。
status	返回状态数（例如 “404” 为 “Not Found” 或 “200” 为 “OK”）。
statusText	返回状态文本（如 “Not Found” 或 “OK”）。

注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

实例

同步方式把 XML 文档解析到 XML DOM 对象中：

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

异步请求数据

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

jQuery AJAX 方法

load()

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。

语法

$(selector).load(url,data,function(response,status,xhr))

参数	描述
url	必需。规定您需要加载的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定 load() 方法完成时运行的回调函数。

function(response,status,xhr)参数说明：

response - 包含来自请求的结果数据
status - 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）
xhr - 包含 XMLHttpRequest 对象

$.get()和$.post()

$.get() ：使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.get(URL,data,function(data,status,xhr),dataType)
$.post() ：使用 AJAX 的 HTTP POST 请求从服务器加载数据
$(selector).post(URL,data,function(data,status,xhr),dataType)

参数	描述
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。

dataType 可能的类型：

“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应，并以纯文本返回
“json” - 以 JSON 运行响应，并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

实例

请求 “test.php”，但是忽略返回结果：$.get("test.php");
请求 “test.php” 并连同请求发送一些额外的数据（忽略返回结果）：
$.get("test.php", { name:"Donald", town:"Ducktown" });
请求 “test.php” 并传递数据数组到服务器（忽略返回结果）：
$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });
请求 “test.php” 并提醒请求的结果：

$.get("test.php", function(data){
alert("Data: " + data);
});

$.getJSON()和$.getScript()

$.getJSON() : 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getJSON(url,data,success(data,status,xhr))
$.getScript() : 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$().getScript(url,success(response,status,xhr))

设置请求数据

$.param() ：创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
语法：$.param(object,trad)
- object ：必需。规定要序列化的数组或对象。
- trad : 可选。布尔值，指定是否使用参数序列化的传统样式。
  示例：
  $.param({ width:1680, height:1050 }) //{ width:1680,height:1050 }
serialize() ：序列化表单元素集为字符串以便提交
serializeArray() ：序列化表单值来创建对象（name 和 value）的数组
示例：

<body>
<form action="">
第一个名称: <input type="text" name="FirstName" value="Mickey" /><br>
最后一个名称: <input type="text" name="LastName" value="Mouse" /><br>
</form>
<button>序列化表单值</button>
<div id="result"></div>
<div id="results"></div>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#result").text($("form").serialize());
        //FirstName=Mickey&LastName=Mouse
        x=$("form").serializeArray();
        //alert(JSON.stringify(x));
        //[{"name":"FirstName","value":"Mickey"},{"name":"LastName","value":"Mouse"}]
        $.each(x, function(i, field){
            $("#results").append(field.name + ":" + field.value + " ");
        });
        //FirstName:Mickey LastName:Mouse
    });
});
</script>
</body>

$.ajax()和$.ajaxSetup()

$.ajax() ：执行异步 AJAX 请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法：$.ajax({name:value, name:value, ... })

{name:value, name:value, … }参数规定 AJAX 请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值：

名称	值/描述
url	规定发送请求的 URL。默认是当前页面。
type	规定请求的类型（GET 或 POST）。
async	布尔值，表示请求是否异步处理。默认是 true。
username	规定在 HTTP 访问认证请求中使用的用户名。
password	规定在 HTTP 访问认证请求中使用的密码。
timeout	设置本地的请求超时时间（以毫秒计）。
data	规定要发送到服务器的数据。
scriptCharset	规定请求的字符集。
traditional	布尔值，规定是否使用参数序列化的传统样式。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
contentType	发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
dataType	预期的服务器响应的数据类型。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
xhr	用于创建 XMLHttpRequest 对象的函数。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
beforeSend(xhr)	发送请求前运行的函数。
success(result,status,xhr)	当请求成功时运行的函数。
error(xhr,status,error)	如果请求失败要运行的函数。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。

完整的名称/值查看https://www.jquery123.com/jQuery.ajax/

$.ajaxSetup() ：为将来的 AJAX 请求设置默认值。语法同$.ajax()。

全局ajax方法

注意：如果global选项设置为false，调用$.ajax() 或以下方法将不会被触发。

ajaxSend() ：规定 AJAX 请求发送之前运行的函数
语法：$(document).ajaxSend(function(event,xhr,options))
function(event,xhr,options) ：必需。规定当请求成功时运行的函数。
- event - 包含 event 对象
- xhr - 包含 XMLHttpRequest 对象
- options - 包含 AJAX 请求中使用的选项
ajaxSuccess() ：规定 AJAX 请求成功完成时运行的函数。语法同ajaxSend()。
ajaxError() ：规定 AJAX 请求失败时运行的函数
语法：$(document).ajaxError(function(event,xhr,options,exc))
function(event,xhr,options,exc) : 必需。规定当请求失败时运行的函数。
- exc - 包含 JavaScript exception
ajaxComplete() ：规定 AJAX 请求完成时(无论成功或失败)运行的函数。语法同ajaxSend()。
ajaxStart() ：规定第一个 AJAX 请求开始时运行的函数
语法：$(document).ajaxStart(function())
function() ：必需。规定当 AJAX 请求开始时运行的函数。
ajaxStop() ：规定所有的 AJAX 请求完成时运行的函数
当 AJAX 请求完成时，jQuery 会检查是否存在更多的 AJAX 请求。如果没有其他请求正在等待运行，ajaxStop()方法会运行指定的函数。
语法：$(document).ajaxStop(function())
function() : 必需。规定所有的 AJAX 请求完成时运行的函数。

$.ajaxPrefilter()和$.ajaxTransport()

$.ajaxPrefilter() ：在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项

$.ajaxPrefilter(dataTypes,function(options,originalOptions,xhr))

dataTypes：一个可选的字符串，其中包含一个或多个空格分隔的数据类型
function(options,originalOptions,xhr)：用于设置未来的Ajax请求的默认值的函数
- options 是请求的选项
- originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值
$.ajaxTransport() ：创建处理 Ajax 数据实际传送的对象

$.ajaxTransport(dataType,function(options,originalOptions,xhr))

dataType：一个字符串，标识使用的数据类型
function(options,originalOptions,xhr)：使用第一个参数中提供的数据类型返回新的传输（transport）对象的函数

传输（transport）是一个对象，它提供了两种方法，send 和 abort，内部使用由$.ajax()发出请求。传输（transport）是最高级的方法用来增强$.ajax()并且应仅作为当预过滤器（prefilters）和转换器（converters）无法满足你的需求的时候的最后的手段。

由于每个请求需要有自己的传输（transport）对象实例，传输不能直接注册。因此，你应该提供一个函数代替返回传输（transport）。

传输（transports）工厂注册使用$.ajaxTransport()。一个典型的注册看起来像这样：

$.ajaxTransport(dataType, function( options, originalOptions, jqXHR ) {
  if( /* transportCanHandleRequest */ ) {
    return {
      send: function( headers, function( status, statusText, responses, headers ) ) {
        /* send code */
      },
      abort: function() {
        /* abort code */
      }
    };
  }
});