AJAX 基础教程

最新推荐文章于 2024-08-11 21:47:18 发布

爱睡的虫虫

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量906

点赞数 1

分类专栏：移动端开发文章标签： ajax 原生ajax

本文链接：https://blog.csdn.net/feifanzhuli/article/details/90383798

版权

移动端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

前言：客户端访问服务器时，需要操作数据库中的数据，在网页中显示的数据，这就需要用到 Ajax。

同步

同步访问：在访问服务器时，客户端只能等待服务器的相应，不能做其它事情。用户体验非常差。

代表场合：

浏览器输入网址访问
a标记的默认跳转
submit按钮的表单提交

异步

在一段时间内，可以同时干多个事情
异步访问：在向服务器发送请求时，不耽误用户在网页上做其它操作。

AJAX最为吸引人的就是它的“异步”特性，AJAX可以无需刷新页面而与服务器端进行通信。

AJAX是什么

百科解释

简而言之：

AJAX的意思就是异步的JavaScript和XML。

AJAX的作用

本质：使用JS提供的XMLHttpRequest对象，异步的向服务器发送请求，并接收相应数据；它可以发送及接收各种格式的信息，包括JSON、XML、HTML和文本文件。
在AJAX中，服务器响应回来的是部分数据而不是整个网页，并且可以以无刷新的效果来更改页面中的局部内容。

Ajax 的使用（四大步）

第一步：创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

IE8以下
var xhr = new ActiveXObject("Microsoft.XMLHTTP")
为了更好地实现AJAX在各个浏览器中的兼容性，可以通过window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。

如果window.XMLHttpRequest的返回值是null的话，需要通过ActiveXObject()创建，否则需要通过XMLHttpRequest()来创建。
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")

第二步：创建请求：open

xhr.open(“method”,”url”,async);
例子： xhr.open(“get”,”/data.json”,true);

xhr.open()：用来打开与服务器的连接，它需要三个参数：

method：请求方式；可以是GET或POST
url：请求的URL；指定服务器端资源，例如：/ajax.json
async：请求是否为异步；true异步请求，false同步请求。（默认：true）
第三步：注册监听器：onreadystatechange

作用：当xhr的readyState的值发生变化时即触发
语法：

    xhr.onreadystatechange = function(){
        // 每当xhr的readyState的值发生变化，要执行的操作
        // 判断 xhr.readyState为4的时候 并且 xhr.status 的值为200的时候，才能获取正常的响应数据
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 可以接受响应回来的数据
            // responseText 表示服务器响应回来的文本
            var resText = xhr.responseText
        }
    }

xhr对象一共有5个状态：通过 readyState 获取

readyState - 属性

var state = xhr.readyState； //可能是0、1、2、3、4

作用：表示 xhr对象的请求状态

值：由　0 - 4 表示5个状态

0：请求尚未初始化
1：已经打开到WEB服务器的连接，正在向服务器发送请求
2：请求完成
3：正在接收服务器端的响应
4：接收响应数据成功（通常我们只关心最后这个状态!!!）

注意：当readyState的值为4的时候，表示所有的响应都已经接收完毕

status - 属性

var status=xhr.status;//例如200、404、500

作用：服务器的响应状态码

1、xhr.stastus === 2开头一般都代表成功；
2、xhr.stastus === 3开头一般都代表重新定向 304代表走的缓存；
3、xhr.stastus === 4开头一般都代表前端路径错误 404(找不到资源) 405(请求类型的错误)；
4、xhr.stastus === 5开头一般都是服务器的错误；

只记住一个200 即可，当值为200的时候，表示服务器已经正确的给出所有的响应。

第四步：发送请求：send

xhr.send(data);

作用：表示发送请求
语法： xhr.send(body)
body: 是请求主体，没有请求主体时，body位置处写 null
注意：
如果是GET请求,必须给出null。
如果是POST请求，xhr.send(“username=zhangSan&password=123”);

文本请求的响应：responseText

xhr.responseText；

作用：从服务器返回的数据

1、此属性包含对文本的请求的响应，若是请求成功，就返回一个DOM字符串；
2、若是请求不成功或尚未发送，则返回null。

封装ajax 实例：

function Ajax(type, url, isasync, success) {
	var xhr = new XMLHttpRequest();
	xhr.open(type, url, isasync);
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4 && xhr.status === 200) {
			var resulet = JSON.parse(xhr.responseText);
			success && success(resulet);
		}
	}
	xhr.send();
}

使用：

    Ajax("get", "data.json",true, function (res) {
		var str = "";
		res.forEach(function (item) {
			str += `<p>${item.name}</p>`
		})
		document.querySelector(".box").innerHTML = str;

	});