JQuery的Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53942010/article/details/127707638

Ajax

什么是Ajax

Ajax的优点：不需要重新加载整个页面，就可以和服务器交换数据并更新部分网页内容
Ajax是异步的JavaScript和XML
Ajax不是新的编程语言，是一种使用现有标准的新方法

发送请求-处理响应数据

XMLHttpRequest对象用于和服务器交换数据

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。· method：请求的类型；GET 或 POST· url：文件在服务器上的位置· async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。· string：仅用于 POST 请求

GET还是POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

XMLHttpRequest对象的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
Xmlhttp.readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。· 0: 请求未初始化· 1: 服务器连接已建立· 2: 请求已接收· 3: 请求处理中· 4: 请求已完成，且响应已就绪
Xmlhttp.status	200: "OK" 404: 未找到页面

JQuery的Ajax

$.get()方法

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

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

$.post()方法

$("button").click(function(){ 
$.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){
      alert("数据: \n" + data + "\n状态: " + status);
     }); 
});

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

$.ajax()方法

$("button").click(function(){ 
    $.ajax({url:"demo_test.txt",success:function(result){ 
        $("#div1").html(result); 
    }}); 
});+

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。
async: 默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。
data: 要求为Object或String类型的参数，发送到服务器的数据。get请求中将附加在url后
dataType: 预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
- xml：返回XML文档，可用JQuery处理。
- html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
- script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
- json：返回JSON数据。
- text：返回纯文本字符串。
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。