Ajax——请求

一,向服务器发送请求

如果需要发送请求,可以使用XMLHttpRequest对像的open()和send(),open()用来规则请求,send()用来发送请求。

方法描叙
open(Method,url,async,user,pws)

规定请求的类型:

method:请求的方式get或者post

url:服务器(文件的位置)

async:true或者false

user:用户

psw:密码

send()发送get请求
send(String )向服务器发送post请求

get请求和post请求

  • get请求比Post请求更快,不过在以下情况下使用post请求:
  • 缓存的文件不是选项(是文件或者数据库)
  • 向服务器发送大量的数据
  • 发送用户输入的(post比get安全)

get请求:

 普通的get请求:

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

也可以添加一个字段:

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

如果需要使用get请求来发送数据,数据应该放在url上,如

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

post请求:

简单的post请求:

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如果需要向html那样post数据,请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据:

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)方法:

header:规定的头部名称

value:规定的头部值

 

二,服务器响应

onreadystatechange属性:

  readyState 属性存留 XMLHttpRequest 的状态。

  onreadystatechange 属性定义当 readyState 发生变化时执行的函数

  status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

  每当readyState的值发生改变时候都会调用onreadyStateChange

使用回调函数:(当readyState为4,status为200时候表示响应就绪

回调函数就是一种作为参数被传递到另一个函数的函数。

如果您的网站中有多个 AJAX 任务,那么您应该创建一个执行 XMLHttpRequest 对象的函数,以及一个供每个 AJAX 任务的回调函数。

该函数应当包含 URL 以及响应就绪时调用的函数

<!DOCTYPE html>
<html>
<body>

<div id="demo">

<h1>XMLHttpRequest 对象</h1>
//调用方法,并且传递请求的路径,和回调函数
<button type="button" onclick="loadDoc(‘/example/js/ajax_info.txt‘, myFunction)">更改内容
</button>
</div>

<script>
//创建一个函数,参数一位请求的地址,参数二为回调函数
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 myFunction(xhttp) {
  //responseText属性是将返回的数据以文本形式显示
  document.getElementById("demo").innerHTML =
  xhttp.responseText;
}
</script>
</body>
</html>

服务器响应的属性:(XMLHttpRequest对象的属性)

responseText:获取字符串形式的响应数据

responseXML:获取XML数据形式的响应数据

服务器响应的方法:(XMLHttpRequset对象的方法)

getResponseHeader(String headerName):从服务器返回的特定的头部信息

getAllResponseHeaders():从服务器返回所有的头部信息