Ajax

最新推荐文章于 2024-09-29 20:25:59 发布

h_y_

最新推荐文章于 2024-09-29 20:25:59 发布

阅读量115

点赞数

文章标签： ajax js javascript

本文链接：https://blog.csdn.net/m0_46549742/article/details/107290862

版权

## 一、Ajax概念

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。

## 二、Ajax作用
快速创建动态网页。
三、Ajax工作原理图
在这里插入图片描述
四、书写原生的Ajax
采用五步法：

创建ajax对象
创建对象时需考虑兼容性问题：

 var  xmlHttp;
    if(window.XMLHttpRequest)
    {
        //ie7+或者火狐或者谷歌
        xmlHttp=new XMLHttpRequest();
    }
    else{
        //ie5和ie6
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

建立连接：使用open方法
参数：
（1）method请求的方式：get或者post；
与 post相比，get更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 post请求：
①无法使用缓存文件（更新服务器上的文件或数据库）；
②向服务器发送大量数据（post没有数据量限制）；
③发送包含未知字符的用户输入时，post比 get更稳定也更可靠。
（2）连接的服务器文件地址：url；
（3）async：Ajax请求是异步还是同步，默认是异步，true表示异步， false表示同步；
（4）用户名
（5）密码

  //2.建立连接
    xmlHttp.open("get","",true);

发送请求：使用send方法
get方式时，传递的参数直接写在URL路径之后，如：http://www.maodou.com/getdata?id=10086&pwd=12345;；
post方式时，传递的参数直接写在send方法里面，如：send({id:10086,pwd:12345}) 。

//3.发送请求
    xmlHttp.send();

Ajax响应事件
（1）onreadystatechange 事件：每当 readyState 改变时，就会触发onreadystatechange 事件。
（2）XMLHttpRequest 对象的三个重要的属性：
①readystate：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
②status
200: 服务器响应成功
404: 未找到页面，页面丢失
500：服务器报错

 xmlHttp.onreadystatechange=function (){
        if(xmlHttp.readyState==4&&xmlHttp.status==200)
        {
            //5.获取服务器响应数据
            xmlHttp.response//object
            xmlHttp.responseText//string
        }
    }

页面更新
拿到数据后，操作dom，更新页面。
五、原生Ajax的同步异步
1.同步异步概念
（1）同步
同步是等待Ajax请求响应结束，直接在继续加页面。
（2）异步
异步是Ajax请求和页面同时加载。
2.原生js不能使用同步：
原因：JavaScript是单线程的，因此同个时间只能处理同个任务，所有任务都需要排队，前一个任务执行完，才能继续执行下一个任务。

 var data=null;
    var http=new XMLHttpRequest();
    http.open("get","url",true);
    http.send();
    http.onreadystatechange=function (){
        if(http.readyState==4&&http.status==200)
        {
            console.log(http.responseText);
            data=http.response;
        }
    }

六、原生Ajax的封装
实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var http;
    if(window.XMLHttpRequest)
    {
        http==new XMLHttpRequest();
    }
    else{
        http=new ActiveXObject("Microsoft.XMLHTTP");
    }
    http.open();
    http.onreadystatechange=function (){

    }
    http.send();

    function Ajax(method,url,data,callback){
        var http=new XMLHttpRequest();
        if(method=="get")
        {
            if(data)
            {
                url+="?";
                url+=data;
            }
            http.open(method,url,true);
            http.send();
        }
        else{
            http.open(method,url,true);
            if(data)
            {
                http.send(data);
            }
            else{
                http.send();
            }
        }
        http.onreadystatechange=function (){
            if(http.status==200&&http.readyState==4)
            {
                callback(http.response);
            }
        }
        //上传文件使用
        http.οnprοgress=function (){

        }
    }
    Ajax("get","","",function (res){
        console.log(res);
    })
</script>
</body>
</html>