原生JS实现Ajax方法

最新推荐文章于 2024-04-22 12:12:03 发布

被风吹过的忧伤

最新推荐文章于 2024-04-22 12:12:03 发布

阅读量313

点赞数 4

分类专栏： servlet

本文链接：https://blog.csdn.net/weixin_47891374/article/details/113803519

版权

servlet 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原生JS实现Ajax

什么是Ajax

Ajax是通过资源路径寻址结合回调函数得到服务端的数据但不会从新加载页面，从而前台根据回调的结果进行相关的逻辑业务，全称是 Asynchronous JavaScript and XML异(步的 JavaScript 和 XML）
在发送请求进行响应等待期间不能和服务器发生其他的交互操作，原因：浏览器由于内置了XmlHttpRequest对象，帮我们向服务器发送请求，服务器会返回一个xml或文本等其他类型的数据给浏览器，从而做一些页面效果的渲染与展现或进入其他页面等操作，从而达到一个页面没有刷新，但是执行了相关效果，我们称为异步刷新

Ajax异步刷新的好处

        好处：
                1、给用户的交互效果展现比较好
                2、不需要下载其他控件，它是浏览器内置的
                3、不重新加载整个页面的情况下，可以与服务器交换数据并重新渲染页面

获取内置对象XmlHttpRequest对象

//获取浏览器的内置对象 XMLHttpRequest
 function getXHR() {
     var xhr = null;
     //判定：如果当前浏览器里面有这么一个内置对象，说明他不是IE低版本浏览器
     if ((typeof XMLHttpRequest) != 'undefined'){
     	//构建内置对象
        xhr = new XMLHttpRequest();
     }else {
     	//构建IE低版本的内置对象
         xhr = new ActiveXObject("Microsoft.XMLHttp");
     }
     return xhr;
 }

原生JS实现Ajax

get请求方式写法

	// 此写法为get请求方式，非post请求方法
	//封装原生JS实现Ajax异步刷新
	function jsPostVersion(){
		//1、获取内置对象
		var xhr = getXHR();
		// 2、设置请求方式：请求类型、请求名称，是否异步
		xhr.open('GET','login?username=张三&password=123456',true);
		// 3、回调函数
		xhr.onreadystatechange = function (msg) {
			//两个条件：1、请求完成，响应就绪(4)   2、请求处理成功(200)
	        if (xhr.readyState == 4 && xhr.status == 200){
	            //msg 表示回调的内容，该方法中可以写接受回调数据后的业务操作
	        } 
    };
    	// 4、将请求发送给服务器
    	xhr.send(null);
	}

post请求方式写法

	// 此写法为post请求方法
	//封装原生JS实现Ajax异步刷新
	function jsPostVersion(){
		//1、获取内置对象
		var xhr = getXHR();
		// 2、设置请求方式：请求类型、请求名称，是否异步
		xhr.open('POST','login',true);
		//3、设置请求内容
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		// 4、、回调函数
		xhr.onreadystatechange = function (msg) {
			//两个条件：1、请求完成，响应就绪(4)   2、请求处理成功(200)
	        if (xhr.readyState == 4 && xhr.status == 200){
	            //msg 表示回调的内容，该方法中可以写接受回调数据后的业务操作
	        } 
    };
    	// 5、将请求发送给服务器
    	xhr.send("userName=张三&password=123456");
	}

两种方式的不同点

两种方式请求的URL中携带数据的方式不同，get方式是直接在URL地址后面通过 ? 与类似键值对的方式进行数据携带即可，而post方式则需要在通过内置对象的sned()方法中传入数据参数
post方式相对于get方式在数据携带上安全性更高，因此我们Post请求方式方式需要设置一下内置对象的请求对象消息头类型，从而服务器才能接收到我们传递的数据

相关参数说明

参数名称	含义说明
open(method,url,asynch)方法	method：请求类型、URL、是否异步 ①method：秦桧的类型，GET或POST等请求方式；②url请求服务器的资源访问地址 ③asynch是否为异步请求，true表示为异步，false表示同步，默认为true
setRequestHeader()方法	当请求的类型是POST请求方式时，需要设置消息头类型，便于后台接收数据
onreadystatechange()方法	是用来存储函数，当我们的readyState属性值发生改变时，将会调用该函数
readyState 属性	存储XmlHttpRequest的状态，属性值∈[0,4] ：① 0 表示请求未初始化 ②1表示与服务器建立连接 ③2表示请求接收成功 ④3 表示请求处理中 ⑤ 4表示请求完成，且响应就绪状态
status 属性	该属性为HTTP请求状态码：①200表示请求响应成功 ② 404 表示资源路径不可达 ③500 表示逻辑代码错误
send(string)方法	将请求发送给服务器，其中的string两种情况：①请求类型为GET方式时此处string为null即可 ②若为POST请求方式，该string为url携带的数据，填写格式：parm1=value1&parm2=value2&…