AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 91 阅读

CC 4.0 BY-SA版权

什么是AJAX?
不用加载整个页面只用更新部分页面----用来做数据的交互
异步的JavaScript和xml
原理:通过xmlHttpRequest对象向服务器发送异步请求,从而从服务器中获取数据,然后把数据通过js来操作dom从而达到渲染页面的效果

用于客户端和服务器端交换数据,可以实现在不重新加载整个页面的情况下对页面进行部分更新
核心:xmlHttpRequest对象
特点:异步加载,局部更新

注意:凡是用ajax从服务器获取数据,不能使用文件协议,遵循的是http协议
优势:页面局部更新,提高用户体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.创建XMLHttpRequest对象对象&ndash;&gt;用户与服务器交换数据
    var xhr=new XMLHttpRequest();
    //2.规定请求的类型(get  post),请求的url的地址,是否异步(bool),默认就是异步
    xhr.open('get','test.html');
    //发送请求到服务器
    xhr.send();
    //等待响应,因为不知道什么时候响应成功,所以使用事件机制去触发响应
    xhr.onreadystatechange=function () {
        console.log(this.readyState);
        //判断
        if (this.readyState==4 && this.readyState==200) {
            console.log(this.responseText);//获取相应的文本
            document.querySelector("#dv").innerHTML=this.responseText;
        }
    }
</script>
<h1>我的页面</h1>
<div id="dv"></div>

</body>
</html>

readyState的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.创建XMLHttpRequest对象对象&ndash;&gt;用户与服务器交换数据
    var xhr=new XMLHttpRequest();
    console.log(xhr.readyState);//0 请求未初始化
    //2.规定请求的类型(get  post),请求的url的地址,是否异步(bool),默认就是异步
    xhr.open('get','test.html');
    console.log(xhr.readyState);//1 服务器连接已建立
    //3.发送请求到服务器
    xhr.send();
    console.log(xhr.readyState);//1 服务器连接已建立
    //4响应请求
    xhr.onreadystatechange=function () {
        console.log(xhr.readyState);//2  3  4
        switch (this.readyState) {
            case 2://请求已经接受
                console.log(this.getAllResponseHeaders('date'));//获取其中的一个响应头
                //获取所有响应头
                console.log(this.getAllResponseHeaders());
                console.log(this.responseText);//不能获取到响应数据
                break;
            case 3://请求处理中,数据可能不完整
                console.log(this.responseText);//可以获取到响应的数据0
                break;
            case 4://请求已完成,且响应已就绪
                console.log(this.responseText);//获取完整响应内容
                break;

        }

    }
</script>
</body>
</html>

get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>

</ul>
<script>
var xhr=new XMLHttpRequest();
xhr.open('get','contacts.json');
xhr.send();
xhr.onreadystatechange=function () {
    if (this.readyState!=4) return;

console.log(typeof this.responseText);//string
//序列化,将字符串转换为json格式数据JSON.parse()
    //反序列化:将json字符串转换成object
//将相应的字符串转换成json对象格式数据
var data= JSON.parse(this.responseText);

for (var i=0;i<data.length;i++) {
var obj=data[i]
var liObj=document.createElement("li");
document.querySelector("ul").appendChild(liObj);
liObj.innerHTML=obj.name;
}
}
</script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<form action="test.html" method="get">
    用户名:<input type="text" name="username">
    <input type="submit" value="提交">
</form>-->
<script>
    //get请求将数据显示在地址栏不安全
    //get一般用于服务器请求数据
    //post一般是业务数据,表单提交,用户登录,post获取数据
</script>
<input type="text" id="txt">
<input type="button" value="提交" id="sub">
<script>
    document.querySelector("#sub").onclick=function () {
        var data=document.querySelector("#txt").value;
        var xhr=new XMLHttpRequest();
        xhr.open('post','http://www.liulongbin.top:3005/api/addproduct');
        xhr.setRequestHeader("Content-Type",'application/x-www-form-urllencoded')
        xhr.send("name="+data);
        xhr.onreadystatechange=function () {
            if (this.readyState != 4) return;
            console.log(this.responseText);
        }
    }
</script>
</body>
</html>

异步加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**
     * ajax的优点:异步加载,局部更新--页面加载快一些,用户体验好一些
     * 同步:一次执行一个,前面的代码没有执行完成,后面的就排队,不能开始
     *异步:一次执行一堆,前面一个没有完成,后面的也能开始
     * ajax的缺点:破坏浏览器机制,安全性不高
     */
    //异步操作
    console.log(111);
    var xhr=new XMLHttpRequest();
    xhr.open('get','test.html',true);
    xhr.send();
    xhr.onreadystatechange=function () {
        if (this.readyState==4){
            console.log(222);
        }
    }
    console.log(333.);
</script>
</body>
</html>

jquery中的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="dv"></div>
<script src="jquery-1.8.3.min.js"></script>
<script>
    /**
     * load:载入远程HTML,文件代码并插入到DOM中
     * load()的使用,$(对象).load('url路径',(属性,属性值),成功的 回调函数(response,status)
     */
    $("#dv").load('test.html',{'name':'小明','age':12},function (res,status) {
        console.log(res);
        console.log(status);
    })
</script>
</body>
</html>