AJAX-基础的get&post方法

最新推荐文章于 2024-07-19 12:00:00 发布

ALonelyLemon

最新推荐文章于 2024-07-19 12:00:00 发布

阅读量135

点赞数

分类专栏： JavaScript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/lemon_yu/article/details/95380691

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

AJAX

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

异步请求主要步骤

创建异步对象
设置请求方式和请求地址
发送请求
监听状态化
处理返回结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var button = document.getElementsByClassName("btn")[0];
            button.onclick = function () {
                //1.创建一个异步对象
                var xmlhttp = new XMLHttpRequest();
                
                //2.设置请求方式和地址
                /*
                三个参数
                method：请求类型：GET或POST
                url：文件位置
                async：异步（true）或同步（false）？
                 */
                xmlhttp.open("GET","ajax-get.php",true);
                
                //3.发送请求
                xmlhttp.send();
                
                //4.监听状态变化
                xmlhttp.onreadystatechange = function () {
                //5.处理返回结果
                    console.log("返回信息");
                }
            }
        }
    </script>

</head>
<body>
<button class="btn">提交</button>
</body>
</html>

解决事件多次响应

实际操作中第4步会被多次执行（可能触发2-3次），因为XMLHttpRequest 有五个状态，从0->4变化，每变化一次事件被触发一次

请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就

为了避免多次触发，我们要判断服务器是否处于完成响应状态

    xmlhttp.onreadystatechange = function () {
       if(xmlhttp.readyState ==4){
           console.log("返回信息");
       }
   }

请求失败的处理

实际操作中我们发现，当请求失败时，依旧会进入状态4
我们要通过服务器的状态码来确定请求是否成功
状态码被保存在对象的status变量中

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script>
       window.onload = function () {
           var button = document.getElementsByClassName("btn")[0];
           button.onclick = function () {
               //1.创建一个异步对象
               var xmlhttp = new XMLHttpRequest();
               //2.设置请求方式和地址
               /*
               三个参数
               method：请求类型：GET或POST
               url：文件位置
               async：异步（true）或同步（false）？
                */
               xmlhttp.open("GET","ajax-get.php",true);
               //3.发送请求
               xmlhttp.send();
               //4.监听状态变化
               xmlhttp.onreadystatechange = function () {
               //判断服务器是否完成响应
                   if(xmlhttp.readyState ==4){
                       //判断服务器是否响应成功
                       if(xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status ==304){
                       //5.处理返回结果
                           console.log("返回信息");
                       }else{
                           console.log("请求失败");
                       }

                   }

               }
           }
       }
   </script>

</head>
<body>
<button class="btn">提交</button>
</body>
</html>

http状态码

HTTP状态码非常多,不需要全部记住，头部数字表示了其类型

1XX:通知类
2XX:成功(304特殊也为成功)
3XX:重定向
4XX:客户端错误
5XX:服务器端错误

常见状态码

200(“OK”)
一切正常。实体主体中的文档（若存在的话）是某资源的表示。

301(“Moved Permanently”)
当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。

304(" Not Modified")
如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

400(“Bad Request”)
客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。

404(“Not Found”) 和410(“Gone”)
当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。

409(“Conflict”)
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。
500(“Internal Server Error”)
服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。

服务器响应

如需获得来自服务器的响应，
请使用 XMLHttpRequest 对象的
responseText （获得字符串形式的响应数据。）
或
responseXML 属性（获得 XML 形式的响应数据。）。

对ie的兼容

ie浏览器存在一个特性: 认为同一个url只有一个结果（至ie11仍然出现），
这导致了如果返回的数据发生过变化也只会返回第一次的结果（疑似后续请求的返回会直接调用缓存）

解决方法：禁止缓存或设置随机参数
方法一：禁止缓存

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

方法二：设置随机参数（推荐使用）


xhr.open("GET",url+"?t="+(new Date().getTime()),true);
//在提交参数中加入时间,因为时间一直在变,服务器可能并不会处理这个参数
//但每次url都不一样了
xhr.open("GET",url+"?t="++Math.random(),true);
//用随机数也可以

post

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open(“POST”,“ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);

相比get方法post多出一条声明
信息不再放置于url而由send发送

自己封装一个ajax


function ajax(type,url,obj,timeout,success,error) {
//type:发送方式;  url：地址；    obj：参数kv；   timeout：最长时间；
 //success：成功返回函数；error：失败返回函数
    var str = objstr(obj); //传入的字符串                    
    var timer;
        //1.创建一个异步对象
    var xmlhttp = new XMLHttpRequest();
        //2.设置请求方式和地址
        /*
         三个参数
         method：请求类型：GET或POST
         url：文件位置
         async：异步（true）或同步（false）？
         */

        if(type=="GET"){
            xmlhttp.open(type,url+"?"+str,true);
            //3.发送请求
            xmlhttp.send();
        }else{
            xmlhttp.open(type,url,true);
            //3.发送请求
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(str);
        }

        //4.监听状态变化
    xmlhttp.onreadystatechange = function (ev) {



        if(xmlhttp.readyState ==4){
            clearTimeout(timer);
            //5.处理返回结果
            if(xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status ==304){
                success(xmlhttp);
            }else{
                console.log("请求失败,错误代码:"+xmlhttp.status);
                error(xmlhttp);
            }

        }


    }
    if(timeout){//超时判断
        timer = setTimeout(function () {
            console.log("请求超时");
            xmlhttp.abort();            //中断请求
            clearTimeout(timer);
        },timeout)
    }

}
function objstr(obj) {//用于提交密码
    obj.t=new Date().getTime();
    var res = [];
    for(var key in obj){
        res.push(key+"="+obj[key]);
    }
    return res.join("&");
}

ALonelyLemon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX-基础的get&post方法

AJAXAjax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。文章目录AJAX异步请求主要步骤解决事件多次响应请求失败的处理http状态码服务器响应对ie的兼容p...
复制链接

扫一扫