Ajax——请求
Posted 枳狸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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():从服务器返回所有的头部信息
以上是关于Ajax——请求的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC 3.2 Thymeleaf Ajax 片段
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。