好三网网站管理软件开发工程师
目录
一.AJAX简介
二.XMLHttpRequests对象
2.1XMLHttpRequests对象简介
2.2创建XMLHttpRequests对象
2.3定义回调函数
2.4发送请求
2.5XMLHttpRequests对象方法介绍
2.6XMLHttpRequests对象属性
三.向服务器发送请求
3.1发送请求
3.2使用GET还是POST
3.3使用GET来发送信息
3.4POST请求
一.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");