美文网首页Web
web中的网络请求原生的Ajax和jQ的Ajax(二)

web中的网络请求原生的Ajax和jQ的Ajax(二)

作者: 追逐_chase | 来源:发表于2019-09-20 17:34 被阅读0次
    web.jpeg

    Ajax发送的请求的过程

    • 1.创建一个请求对象
    • 2.开启一个请求
    • 3.发送请求
    • 4.请求到数据 状态的变化

    一个简单的get请求

    <script>
        var btnObj = document.getElementsByTagName("button")[0];
        btnObj.onclick = function () {
            //1.创建请求对象
            var requstObj = new XMLHttpRequest();
            //2.这是请求参数 (请求的方式| URL | 是否是一部请求)
            requstObj.open("get","http://127.0.0.1/PHP/php-Service/05-Ajax01.php",true);
            //3.发送请求
            requstObj.send();
            //4.监听请求的状态
            requstObj.onreadystatechange = function () {
                //readyState 对应 0 是请求未初始化
                // 1是 服务器连接已经建立
                //2是请求已经接收
                //3.是请求处理中
                // 4是请求已经完成
                console.log(requstObj);
            }
        }
    
    </script>
    
    多次Get请求的 缓存数据问题 和 中文问题
    • 缓存问题

    注意:当浏览器向同一个URL发送多次get网络请求时,浏览器会默认保存·缓存数据·返回给我们,对应的状态码是304
    解决方案: 就是在URL后面拼接一个 无用的时间戳字符串或者不相同的随机数

    • URL中文转码 encodeURI()
     
    var url = "http://www.ezcarry.com?name=希望&psd=123";
    //转化
    url = encodeURI(url);
    

    post和get请求的简单装

    function ajax(obj) {
    
         var request = null;
         if (window.XMLHttpRequest){
             request = new XMLHttpRequest();
         }else {
             request = new ActiveXObject();
         }
            obj.type = obj.type || "get";
         //get请求
         if (obj.type == "get"){
             var time = (new Date()).getTime();
             //清除get的缓存
             obj.url += "?t=" + time;
             //转化中文转码
             if (abString(obj.data).length > 0){
                 obj.url = encodeURI(obj.url + "&" + abString(obj.data));
             }
    
             request.open(obj.type,obj.url,true);
             request.send();
    
         }else {
            //post  请求
    
             request.open(obj.type,obj.url,true);
             //设置请求头
             request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
             request.send(abString(obj.data));
    
         }
    
         request.onreadystatechange = function () {
             if (request.readyState === 4){
                clearInterval(timer);
                if (request.status == 200){
                    obj.success(request);
                }else {
                    obj.error(request);
                }
             }
         }
    
         obj.timeOut = obj.timeOut || 1500;
         var timer = setTimeout(function () {
                //取消请求
                request.abort();
                alert("wifi失联了。。。")
         },obj.timeOut);
    
    
    }
    
    
    
    /**
     *  对象转化为字符串拼接 key=value
     * */
    function abString(data) {
        var arrm = [];
        for (var key in data){
    
            arrm.push(key+"="+data[key]);
        }
    
        return arrm.join("&");
    }
    

    jQ中的Ajax简单介绍

    • get请求
    • $.get(url, [data], [callback], [type])
      • 第一个参数: 请求路径
      • 第二个参数: 提交到服务器端的具体的参数(对象|查询字符串)
      • 第三个参数: 网络请求成功的回调(responseText,statusText,xhr)
      • 第四个参数: 控制服务器返回给我们的响应体的数据类型 xml | text | json | jsonP |script
    
         $("button").eq(0).click(function () {
                // 语法:$.get(url, [data], [callback], [dataType])
    
                //dataType:设置服务器返回的数据类型mtext,json,script,jsonp
    
                $.get("http://127.0.0.1/PHP/php-Service/02-from-get.php",{userName:"BB",psd:"mmm"},function (responseText,statusText,xhr) {
    
                });
            });
    

    post的请求参数和get的一样

    序列化

    把要提交的表单的数据 拼接成字符串,必须注意的事 比如input标签要有name属性值

    $("form").serialize() 把表单中所有的数据都拼接成查询字符串
    $("form").serializeArray()  把表单中所有的数据都拼接成对象数组
    

    load方法主要是用在加载 请求的数据是 html

    //直接会把请求的html代码数据 放到div里面
    $("div").load("php/01-jQ.html ");
    
    

    注意 如果想对 网址中的 html代码 过滤的话 直接 空格+ 标签

    //加载网址中的html代码 放到div中  并过滤掉 网址html代码中的p标签
    $("div").load("php/01-jQ.html  p");
    

    jQ中网络事件的监听

       /*
           * 网络事件 监听的方法
           * */
    
           //只要监听网络成功或者失败 就会执行下面的2个方法
           $(document).ajaxSuccess();
           $(document).ajaxError();
    
           //只会执行一次,第一个网络请求开始的时候 执行
           $(document).ajaxStart();
    
           //执行多次,只要有网络请求就会执行
           $(document).ajaxSend();
           $(document).ajaxComplete();
    
           //只会执行一次 就是最后一个网络请求完成时 执行
           $(document).ajaxStop();
    

    相关文章

      网友评论

        本文标题:web中的网络请求原生的Ajax和jQ的Ajax(二)

        本文链接:https://www.haomeiwen.com/subject/maiductx.html