XMLHttpRequest对象属性
|
属性 |
描述 |
|
onreadystatechange |
定义当readyState属性发生变化时被调用的函数 |
|
readyState |
保存XMLHttpRequest的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪 |
|
responseText |
以字符串返回响应数据 |
|
responseXML |
以XML数据返回响应数据 |
|
status |
返回请求的状态号 200：OK 403：Forbidden 404：NOt found |
|
statusText |
返回状态文本（比如OK或Not Found） |
XMLHttpRequest对象用于同服务器交换数据
向服务器发送请求
如需向服务器发送请求，我们使用XMLHttpRequest对象的open（）和send（）方法：
xhttp.open("GET","ajax.txt",true)
xhttp.send()
|
方法 |
描述 |
|
open(method,url,async) |
规定请求的类型 method:请求的类型：GET还是POST url:服务器（文件位置） async：true（异步）或false（同步） |
|
send() |
向服务器发送请求（用于GET） |
|
send(string) |
向服务器发送请求（用于POST） |
GET还是POST
GET比POST更简单更快，可用于大多数情况下。
不过，请在以下情况下始终使用POST：
缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST无大小限制）
发送用户输入（可包含未知字符），POST比GET更强大更安全
GET请求
一条简单的GET请求：
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
如果需要用GET方法来发送信息，需要将URL添加信息
xhttp.open("GET", "demo_get.asp?fname=mez&nianling=14", true);
xhttp.send();
POST请求
如果是HTML表达提交数据，需要setRequestHeader（）添加一个HTTP头部。请在send（）方法中规定需要发送的数据：
xhttp.open("POST","ajax.asp",true)
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhttp.send("fname=mez&age=17")
|
方法 |
描述 |
|
setRequestHeader(header,value) |
向请求添加HTTP头部 header：规定头部名称 value：规定头部值 |
url-服务器上的文件
open（）方法的url参数，是服务器上文件的地址：
xhttp.open("GET","ajax.asp",true)
该文件可以是任何类型的文件，如.txt和.xml，或服务器脚本文件。
如需异步发送请求，open（）方法的async参数必须设置为TRUE：
发送异步请求对web开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在Ajax之前，该操作可能会导致应用程序挂起或停止。
通过异步发送，JavaScript不必等待服务器相应，而是可以：
在等待服务器响应时执行其他脚本
当响应就绪时处理响应
onreadystatechange属性
通过XMLHttpRequest对象，您可以定义当请求接收到应答时所执行的函数。
xhttp.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
document.getElementById("demo").innerHTML=this.responseText;
}
}
xhttp.open("GET",ajax.txt,true)
xhttp.send()
不推荐同步的XMLHttpRequest（async=false），因为JavaScript将停止执行知道服务器相应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。
每当readyState发生变化时就会调用onreadystatechange函数。
使用回调函数
回调函数是一种作为参数被传递到另一个函数的函数。
如果网站中有多个Ajax任务，那么应该创建一个执行XMLHttpRequest对象的函数，以及一个供每个Ajax任务的回调函数。
该函数应当包含url以及当响应就绪时调用的函数。
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// 行动在这里
}
function myFunction2(xhttp) {
// 行动在这里
}
JSON：JavaScript Object Notation（JavaScript对象标记法）
JSON是一种存储和交换数据的语法。
JSON是通过JavaScript对象标记法写的文本。
交换数据
当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。
JSON属于文本，并且我们能够把任何JavaScript对象转换为JSON，然后将JSON发送到服务器。
发送数据
如果数据存储在JavaScript对象中，可以把该对象转换为JSON，然后将其发送到服务器。
var obj={name:"mez",age:28,city:"China"}
var json=JSON.stringify(myobj)
window.location="demo_json.php?x=" +myJSON
接收数据
如果以Jason格式接收到的数据，可以将其转换成JavaScript对象：
var myJSON=`{"name":"mez", "age":62, "city":China}`
var myobj=JSON.parse(myJSON)
document.getElementById("demo").innerHTML=
