AJAX(JavaScript版本)

目录

一.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)	规定请求 method:请求类型GET或POST url:文件位置 async:true(异步)或false(同步) user:可选的用户名 psw:可选的密码
send()	向服务器发送请求，用于GET请求
send(string)	向服务器发送请求，用于POST请求
setRequestHeader()	将标签/值对添加到要发送的标头

2.6XMLHttpRequests对象属性

属性	描述
onload	定义接收到(加载)请求时要调用的函数
onreadystatechange	定义当readyState属性发生变化时调用的函数
readyState	保存XMLHttpRequests的状态 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成响应且已就绪
responseText	以字符串形式返回响应数据
responseXML	以XML数据返回响应数据
status	返回请求的状态号 200："ok" 403："Forbidden" 404："Not Found"
statusText	返回状态文本,比如("OK"、"Not Found"等)

ps：“当readyState为4且status为200时，响应就绪”

三.向服务器发送请求

3.1发送请求

在上面我们已经提到过，可以使用“open()”和“send()”方法搭配向服务器发送请求

open(method,url,async,user,psw)	规定请求 method:请求类型GET或POST url:文件位置 async:true(异步)或false(同步) 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");