web中的网络请求原生的Ajax和jQ的Ajax（二）

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();