目录
一.AJAX简介
服务器向浏览器传输数据时,浏览器需要跳转到一个新的“URL”或者“重新渲染网页”,才可以接收来自服务器的数据,这对于现代用户来说是不友好的,因为观感极差
那么有没有一种办法可以使浏览器接收服务器的数据,并且不更新网页只是动态的更新网页的部分数据呢?
随着这个问题“AJAX”应运而生,使用“AJAX”可以做到以下事情:
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
二.XMLHttpRequests对象
2.1XMLHttpRequests对象简介
XMLHttpRequests对象是AJAX的基石
使用XMLHttpRequests对象允许前端向后端发送一个数据请求用来获得数据
这个数据请求的过程可以分为下面"四大步”:
- 创建XMLHttpRequests对象
- 定义回调函数
- 打开XMHttpRequests对象
- 向服务器发送请求
2.2创建XMLHttpRequests对象
创建XMLHttpRequests对象的语法:
var myXMLR = new XMLHttpRequests();
2.3定义回调函数
回调函数是作为参数传递给另一个函数的函数
定义回调函数我们可以使用XMLHttpRequests对象提供的“onload()”函数,该函数用来指定当请求响应后应该执行的函数
xhttp.onload = function(){
//当相应准备就绪时要做什么
}
2.4发送请求
向服务器发送请求,我们可以使用“open()”方法来打开XMLHttpRequests对象,再使用“send()”方法来发送请求
xhttp.open("open","ajax_info.txt");
xhttp.send();
2.5XMLHttpRequests对象方法介绍
方法 | 描述 |
new XMLHttpRequests() | 创建新的XMLHttpRequests对象 |
abort() | 取消当前请求 |
getAllResponseHeaders() | 返回头部信息 |
getReponseHeader() | 返回特定的头部信息 |
open(method,url,async,user,psw) | 规定请求
|
send() | 向服务器发送请求,用于GET请求 |
send(string) | 向服务器发送请求,用于POST请求 |
setRequestHeader() | 将标签/值对添加到要发送的标头 |
2.6XMLHttpRequests对象属性
属性 | 描述 |
---|---|
onload | 定义接收到(加载)请求时要调用的函数 |
onreadystatechange | 定义当readyState属性发生变化时调用的函数 |
readyState | 保存XMLHttpRequests的状态
|
responseText | 以字符串形式返回响应数据 |
responseXML | 以XML数据返回响应数据 |
status | 返回请求的状态号
|
statusText | 返回状态文本,比如("OK"、"Not Found"等) |
ps:“当readyState为4且status为200时,响应就绪”
三.向服务器发送请求
3.1发送请求
在上面我们已经提到过,可以使用“open()”和“send()”方法搭配向服务器发送请求
open(method,url,async,user,psw) | 规定请求
|
send() | 向服务器发送请求,用于GET请求 |
send(string) | 向服务器发送请求,用于POST请求 |
3.2使用GET还是POST
在大多数情况下,GET比POST更简单更快
但在以下情况请考虑使用POST:
- 缓存文件不是选项(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST无大小限制)
- 发送用户输入(可包含未知字符),POST比GET更强大更安全
3.3使用GET来发送信息
如果想要使用GET来发送信息,可以在URL中构造信息:
xhttp.open("GET","demo.asp?fname=Bill&&name=Gates",true);
xhttp.send();
3.4POST请求
一条简单的POST请求:
xhttp.open("POST","demo_post.asp",true);
xhttp.send();
如果需要像HTML表单那样POST数据,请通过setRequestHeader()添加一个HTTP头部,并在send()方法中定义要发送的数据
例如:
xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");