zoukankan      html  css  js  c++  java
  • Ajax 请求

    1.封装XMLHttpRequest对象

      // 封装通用的xhr,兼容各个版本
            function createXHR() {
                //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器
                if (typeof XMLHttpRequest != "undefined") {
                    return new XMLHttpRequest();
                } else if (typeof ActiveXObject != "undefined") {
                    //将所有可能出现的ActiveXObject版本放在一个数组中
                    var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                    //遍历创建XMLHttpRequest对象
                    var len = xhrArr.length;
                    for (var i = 0; i <len; i++) {
                        try {
                            //创建XMLHttpRequest对象
                            xhr = new ActiveXObject(xhrArr[i]);
                            //如果创建XMLHttpRequest对象成功,则跳出循环
                            break;
                        } catch (ex) {}
                    }
                } else {
                    throw new Error("No XHR object available.");
                }
            }

    2.创建http请求

     xhr.open('get', './ser/se.json', true);   
    //xhr.open('post','./ser/se.json',ture);
    //如果使用post 就必须适应setRequestHeader()添加http开头 然后在send()方法中规定希望的数据
    //语法:xmlhttp【xhr对象】.setRequestHeader(header,value)
    //使用:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    3.发送请求

      xhr.send(null);
    //post xhr.send({user:"zhangsan",id:6});

    4.响应请求

    xhr =createXHR()
     //响应XMLHttpRequest对象状态变化的函数 
            //在我们readystate 属性发生改变时候
            xhr.onreadystatechange = function() {
                //异步调用成功
            //readyStae 有5给状态值 分别为0-4
            //0是初始化 表示还没有调用send方法  XMLHttpRequest对象还没有初始化
            //1是载入完成 send()方法已经执行完成 XMLHttpRequest对象的请求发送成功
            //2是载入完成 send()方法已经执行完成 XMLHttpRequest对象的请求发送成功
           //3是解析 正则解析响应的内容 XMLHttpRequest对象读取服务器响应的结束
            //4是完成 异步调用完成 响应解析完成 XMLHttpRequest对象读取服务响应结束
            //当readyState发生改变的时候 会触发Ajax自带的事件 onreadystatechang
                if (xhr.readyState=== 4) {
             //status是状态码 常见的有200和400 200表示请求成功 100表示客户端需要继续发送请求 404页面找不到
        //304 表示资源没有被修改 可以使用浏览器缓存 也就是表示之前一定请求成功过,而且你请求的资源距离上次请求没有发送改变
    if ((xhr.status >= 200 && xhr.status <300) || xhr.status === 304) { //获得服务器返回的数据 //eval 转换为js来使用
                /*
                responseText 从服务器进程返回数据的字符串形式
                reponseXML 从服务器进程返回的DOM兼容的文档数据对象  
                status 从服务器返回的数字代码 如404未找到 和200已就绪
                 status Text 伴随状态码的字符信息
                */
             date = JSON.parse(xhr.resoibseText) //date = eval("("+xhr.responseText+")"); console.log(date.slider);      
    } } };

    5.总结

    就是获取XMLHttpRequestHttp对象,通过open创建HTTP请求,用send发送,然后用onreadystatechang检测是否请求成功,如果成功获取数据

    6.

    JavaScript值
    JavaScript的eval()类似于JSON.parse()方法,可以将json字符串转换为json对象,但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码,所以尽量少用
    stringify()
    语法:JSON.stringify()
    功能:用于将一个值转为字符串,该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原
  • 相关阅读:
    Warning: Cannot modify header information
    curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set in
    PHP Warning: strtotime(): It is not safe to rely on the system's timezone settings.
    出现Deprecated: Function ereg_replace() is deprecated in 的原因及解决方法
    APMServ5.2.6 升级PHP版本 到高版本 5.3,5.4
    Apache无法启动解决 the requested operation has failed
    用json获取拉钩网的信息
    json
    如何用组件组装一个简单的机器人
    vue-组件
  • 原文地址:https://www.cnblogs.com/ckxbk/p/13381738.html
Copyright © 2011-2022 走看看