首先我们要知道什么是ajax?
ajax就是在不刷新页面的情况下,发送http请求,接收到服务器给客户端的数据。ajax的全称:async javascript and XML,是一个异步执行的和后台交互的技术。( ajax可同步可异步)
比如我们上网浏览的邮箱注册或者分页等,都是使用了不刷新页面便发送了ajax请求。
ajax的书写
1.首先创建ajax对象
var xhr = new XMLHttpRequest();//但是这个写法是兼容性的,在ie下不能兼容
兼容写法
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
//兼容ie678
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
//更低版本ie
var xhr;
try {
// 针对W3C标准浏览器的
xhr = new XMLHttpRequest();
} catch (e) {
// 针对低版本IE的
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.建立http请求
xhr.open(“请求方式”,“请求地址”,true)
第三个参数:true代表异步请求,false代表同步请求
第三个参数可省略,默认情况下是异步操作
var xhr = new XMLHttpRequest();
xhr.open("get/post","demo.php",true)
3.监听ajax的请求状态
onreadystatechange=>是ajax状态改变事件
readyState是ajax对象请求的状态:
0:未初始化,对象已经建立,但是还未初始化,就是还未调用send方法
1:已经初始化,但是还没有调用send方法
2:发送数据,send方法已经调用,但是http头未知
3:数据接收中,已经接收部分数据,因为响应以及http头不全,这是通过responseText获取少部分数据会出现错误
4:请求完成,数据接收完毕,此时可以通过responseText获取完整的相应数据
responseText是接收服务器响应的字符串数据,如果是xml数据使用responseXML来接收,如果是json数据,其实也是使用字符串形式相应回来的,使用responseText接收以后,使用JSON.parse(str)或str.parseJSON()转为json对象处理
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
var res = xhr.responseText;// 从服务器返回的文本信息
}
}
}
如果是同步请求,就必须将send方法放到监听状态的后面,因为同步就是按顺序执行,先发送请求,当监听到状态的时候,已经发送成功了,所以打印的代码并没有执行(先监听状态,再发送请求)
4.发送请求
xhr.send()
如果post请求要加上下面这一行,如果是是get请求直接xhr.send()即可
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(键=值) //发送请求携带数据,设置数据格式:键=值
get和post的区别:
- get请求的数据展示在地址栏,post在http请求的请求主体中
- get请求的数据长度有限制,post没有限制,除非在服务器设置限制
- get请求的数据格式有限制,必须是url编码的,post的数据没有限制
- get请求不如post安全
- get请求容易有缓存,post没有缓存
get请求
var box = document.querySelector("#box");
var btn = document.querySelector("#btn");
btn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("get", "demo.php");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300){
var res = xhr.responseText;
console.log(res)
box.innerHTML = res;
}
}
}
xhr.send();
}
post请求
var box = document.querySelector("#box");
var btn = document.querySelector("#btn");
btn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("post", "demo.php");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300){
var res = xhr.responseText;
console.log(res)
box.innerHTML = res;
}
}
}
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send();
}
可封装通用的ajax
function createAjax(obj) {
// var xhr = new XMLHttpRequest();
if (obj.dataType == undefined) {
obj.dataType = "json";
}
if (obj.dataType != "json" && obj.dataType != "string") {
throw new Error("传入的数据类型必须是json或者string类型");
}
if (obj.url == undefined) {
throw new Error("url不能为空");
}
if (Object.prototype.toString.call(obj.url) != "[object String]") {
throw new Error("请求的url不是正确的url");
}
//是否传入了请求方式
if (obj.type === undefined) {
obj.type = "get"
}
if (obj.type != "get" && obj.type != "post") {
throw new Error("请求方式必须是get或者post");
}
if (obj.data != undefined) {
if (Object.prototype.toString.call(obj.data) == '[object String]' && obj.data.indexOf("=") != -1) {
obj.data = obj.data;
} else if (Object.prototype.toString.call(obj.data) == "[object Object]") {
var arr = [];
for (var attr in obj.data) {
arr.push(attr + "=" + obj.data[attr])
}
var data = arr.join("&");
obj.data = data;
} else {
throw new Error("传入的数据类型不对,只接受字符串和对象类型");
}
if (obj.type == "get") {
obj.url = "?" + obj.data
}
if (obj.async == undefined) {
obj.async = true;
}
if (Object.prototype.toString.call(obj.async) != "[object Boolean]") {
throw new Error("异步参数必须是个布尔值");
}
//判断是否传入了obj.success和obj.fail
if (obj.success == undefined) {
obj.success = function() {
}
}
if (obj.fail == undefined) {
obj.fail = function() {
}
}
var xhr;
try {
// 针对W3C标准浏览器的
xhr = new XMLHttpRequest();
} catch (e) {
// 针对低版本IE的
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(obj.type, obj.url, obj.async);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
res = xhr.responseText;
if (obj.dataType === "json") {
res = JSON.parse(res)
}
obj.success(res)
} else {
obj.fail()
}
}
}
if (obj.type === "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
if (obj.data != undefined) {
xhr.send(obj.data);
return
}
}
xhr.send();
}