JavaScript学习笔记（9.3）

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=myobj.name