一,向服务器发送请求
如果需要发送请求,可以使用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():从服务器返回所有的头部信息