Ajax

哇酷哇酷zzz

于 2021-04-10 16:55:27 发布

阅读量85

点赞数

分类专栏：前端文章标签： web ajax

本文链接：https://blog.csdn.net/ZL_2014/article/details/115568209

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

Ajax 技术和原理
使用 JQ 操作 Ajax

Ajax 技术和原理

Ajax 的工作原理

Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步化。

在这里插入图片描述

交互方式

非异步的交互方式：

在这里插入图片描述

异步的交互方式：

在这里插入图片描述

XMLHttpRequest

使用案例

GET

function usernameExists() {
    //1. 创建XMLHTTPRequest
    var xmlHttp;
    if(window.XMLHttpRequest) {
        // 非IE
        xmlHttp = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        // IE
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2. 打开链接, true 表示使用的异步的方式发送链接
    var usernameInput = document.getElementById("username");
    xmlHttp.open('GET', '/testusername?username=' + usernameInput.value, true);

    //3. 指定回调函数
    xmlHttp.onreadystatechange = function () {
        // 3.1 判断状态, 4 表示 服务器接收到了数据且响应了。
        if(xmlHttp.readyState == 4) {

            // 3.2 接收返回的数据
            var responseText =  xmlHttp.responseText;

            // ...TODO
            debugger
        }
    }

    //4. 发送数据
    xmlHttp.send();
}

post

将 open 当中的方法修改为 post 然后, send 方法当中携带请求内容即可。

在这里插入图片描述

常用属性

onreadystatechange

readyState 发生变化的时候触发此回调函数。

xmlHttp.onreadystatechange = function() { //我们需要在这写⼀些代码}

readyState

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执⾏。

在这里插入图片描述

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
	//从服务器的response获得数据
	if(xmlHttp.status == 200) {
        // ...TODO
    }
}
}

responseText

可以通过 responseText 属性来取回由服务器返回的数据。在我们的代码中，我们将把时间⽂本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState == 4) {
		document.myForm.time.value = xmlHttp.responseText;
	}
}

其他属性

在这里插入图片描述

常用方法

open

open() 有三个参数。第⼀个参数定义发送请求所使⽤的⽅法，第⼆个参数规定服务器端脚本的URL，第三个参数规定应当对请求进⾏异步地处理。

xmlHttp.open("GET","test.php",true);

send

send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录，那么代码是这样的：

xmlHttp.send(null);

其他方法

在这里插入图片描述

使用 JQ 操作 Ajax

使用原生的方式代码略显复杂，使用 jq 提供的则更为简单。具体内容参照JQ官方文档更为详细。

$.ajax({
	url:请求地址
	type:"get | post | put | delete " 默认是get,
	data:请求参数 {"id":"123","pwd":"123456"},
	dataType:请求数据类型"html | text | json | xml | script | jsonp ",
	success:function(data,dataTextStatus,jqxhr){ },//请求成功时
	error:function(jqxhr,textStatus,error)//请求失败时
})