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():从服务器返回所有的头部信息

猜你喜欢