JS_Ajax基础

最新推荐文章于 2024-05-13 03:34:52 发布

qq_3526022

最新推荐文章于 2024-05-13 03:34:52 发布

阅读量2.5k

点赞数 2

分类专栏： JS 文章标签： javascript ajax 异步

本文链接：https://blog.csdn.net/qq_35260622/article/details/52372196

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一:Ajax
ajax 的全称是Asynchronous(异步) JavaScript and XML
在不刷新页面的情况下从服务器获取，提交数据的一种数据交互方式;

二：Ajax使用步骤概括

//1：创建Ajax对象
var xhr;
     //浏览器兼容问题解决
if(window.XMLHttpRequest){
     xhr = new XMLHttpRequest();
}else{
     xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//或者 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft XMLHTTP');

//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);

//3：发送请求
xhr.send();

//4:接收服务器返回数据
xhr.onreadysatechange=function(){
     if(xhr.readySates==4&&xhr.status==200)
          console.log(xhr.responsetXML)
}

三：Ajax使用步骤分析：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>ajax</title>
     <script>

     //网络数据请求工具 ，数据类型一般有：(json|xml)
     //如何拿：创建对象+配置方法open+send请求发送给服务器
     //监听数据状态， onreadystatechange 判断状态，服务器默认get请求|若用POST请求出错500，请求方式由服务器来定，




          //一:创建Ajax对象
           // 1.1定义变量，用来保存创建出的对象，(XMLHttpRequest);
           var xhr;
           //1.2：根据浏览器支持标准。创建对象。
           //判断当前浏览器是否具备XMLHttpRequest
           if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
           }else{
                //IE5|6|7 使用ActiveXobject创建
                //Ajax组件放在ActiveXObject组件库中，需传入'Miscrosoft.XMLHTTTP'才能返回Ajax组件
                 xhr = new ActiveXObject('Microsoft.XMLHTTP');
           }
           //二：配置Ajax请求地址
           // ======================post请求=====================================
           //配置请求信息
           //open三个参数()
           //1:设置请求方式get|post
           //2:设置请求数据的接口地址
           //3:设置请求是否是异步请求(异步请求:请求发送后，不等待请求数据，先执行其他任务，当数据达到本地在处理) 默认是：true为异步
           // xhr.open('post','index.html',true);

           // post请求参数问题，把post请求所需的参数，放到send()中
                // 若其参数有中文字符，将其转码为unicode并拼接如下
           // xhr.send('user=lemon&password=23');
           // xhr.send('user='+encodeURI('中文')+'password=23');

          //POST请求参数中有中文，都要使用encodeURI进行转码
          //POST参数放置问题  需要将参数丢掷send中
          //GET参数send参数为null send() 为了所有服务器能正确识别，传值为null

           //===========================get请求=============================
           //若有参数拼接到url中，多个数据之间使用&&连接
           //缓存规避
           //get请求中：若每次请求为同一个接口，浏览器将从缓存中取数据，而不是服务器；如果服务器中接口数据内容改变，则就拿不到新数据。
                       所以在请求接口后拼接一个随机数参数，这样浏览器每次拿到接口在缓存中都找不到这个接口对应数据，这样就会从服务器中读取数据，
                        而服务器端并没有开设接收随机数参数的字段，所以get发送过来的随机数将被服务器丢弃，只能返回处理的接口数据；

//         xhr.open('get','myX.ML.xml'+Math.random(),true);
           xhr.open('get','myJSON.json',true);
           //三：发送数据
           xhr.send(null);//严谨写法null

           //四:监听数据传输情况
           //如何判断数据有没有到达：
           //readySate值改变执行，
           xhr.onreadystatechange = function(){
               if(xhr.readyState==4&&xhr.status==200){
                //只有当readyState的值是4且status值是200，服务器数据才算发送到本地
                     //数据请求成功
                     //若数据是xml格式，数据返回保存到responseXML属性中，否则responseText;
                     //请求数据是xml传输的时候，responseText把这些数据转化为字符串，但responseXML会把这些数据当成xml文档对象，再解析成字符串更方便；
                     //若数据请求为json格式，respinseText会把数据转换成json字符串,responseXML并不会受到这些数据为null

                     console.log(xhr.responseText);//json  收
                     console.log(xhr.responseXML);//xml 收
                }
           }
     </script>
</head>
<body>
</body>
</html>

四：同源策略

所谓同源是指域名（主机名或者IP地址）、端口、协议相同。
不同的客户端脚本（JavaScript、ActionScript）在没明确授权的情况下，不能读取对方的资源。

同源策略：保护用户策略，比如：在建行中设置的信息，若想拿到缓存信息， 只能用同源网页进行访问。

Ajax只能访问同源接口

同源策略限制范围：
     1：本地缓存Cookie/localStorage/indexDB数据 
     2：不能互相访问dom节点  | 通过第一个js代码操作另一个html代码，同一家厂商生产，可以自定义修改，无安全隐患。
     3：ajax请求不能发送  | 保护自己公司数据 

同源判断：
URL 协议：主机名：端口 三者相同，才称之为同源；

结果  原因
http://store.company.com/dir2/other.html 成功
http://store.company.com/dir/inner/another.html 成功
https://store.company.com/secure.html  失败  协议不同
http://store.company.com:81/dir/etc.html 失败  端口不同
http://news.company.com/dir/other.html 失败 主机名不同

五：jsonp

在Ajax打破同源的限制
跨域

                //jsonp；利用script标签请求外服务器中数据，从而绕开同源策略对AJAX请求数据限制
                //一：创建javascript标签
                var script = document.createElement('script');
                script.type="text/javascript";
                script.src="http://10.0.159.198/news.php?callback=foo";//传回调函数

                document.getElementsByTagName('body')[0].appendChild(script);//写进文档流

                //二：写回调函数
                function foo(s){
                     alert(s);
                }

jsonp深入学习

六：综合示例：使用Ajax加载天气信息练习:

//Ajax.js
//ajax封装
 //传入参数：请求方式|请求接口地址|请求参数|请求成功回调函数|请求失败回调函数
function createAjax(method, url, data, successFun, failFun) {
//1:根据浏览器支持情况创建
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    //2:判断请求方式类型
    if(method.toUpperCase() == "GET") {
        //2.1请求为get时，配置请求参数，并发送
        xhr.open('GET', url + "?" + data, true);
        xhr.send(null);
    } else if(method.toUpperCase() == "POST") {
        xhr.open('POST', url, true);
        xhr.send(data);
    } else {
        console.errr("error");
        return;
    }
     //3：监听
    xhr.onreadystatechange = function() {
        if(xhr.readyState == "4" && xhr.status == "200") {
            successFun(xhr.responseText);
        } else if(xhr.readyState == "4") {
            failFun('error');
        }

    }
}

//jsonp封装

function createJsonp(srcString){
     //封装好的JSONP 只能对接GET服务器
    var script = document.createElement("script");
    script.type="text/javascript";
    script.src=srcString;
    document.getElementsByTagName("head")[0].appendChild(script);
}

//weather.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>weather_ajax</title>
        <script type="text/javascript" src="Ajax.js"></script>
        <script type="text/javascript"> 
            var murl = 'http://wthrcdn.etouch.cn/weather_mini';
            var data = "city=原阳";
            //调用封装好的ajax;
            createAjax('get', murl, data, successFun, failFun);
            function successFun(d) {
                console.log(d);
            }
            function failFun(d) {
                console.log(d);
            }
            //调用封装好的jsonp
            var strString="http://wthrcdn.etouch.cn/weather_mini?city=原阳&&callback=myfoo";          
            createJsonp(strString);
            function myfoo(d){
                console.log(d);
            }
        </script>

    </head>

    <body>

    </body>

</html>

对象式Ajax封装

//ajax.js
function ajaxFun(obj) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

    var upperMethod = obj.method.toUpperCase();

    if(upperMethod == "GET") {
        xhr.open("GET", obj.url + "?" + obj.data, true);
        xhr.send(null);
    } else if(upperMethod == "POST") {
        xhr.open("POST", obj.url, true);
        xhr.send(obj.data);
    } else {
        console.error("method error!");
        return;
    }
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                obj.successFun(xhr.responseText);
            } else {
                obj.failFun('error');
            }
        }
    }
}

//html中调用
                var obj={
                    method:"GET",
                    url:"http://wthrcdn.etouch.cn/weather_mini",
                    data:"city=北京",
                    successFun:function(d){
                        console.log(d);
                    },
                    failFun:function(d){
                        console.log(d);
                    }
                };
                ajaxFun(obj);

ajax认知深入学习

qq_3526022

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS_Ajax基础

一:Ajax ajax 的全称是Asynchronous(异步) JavaScript and XML 在不刷新页面的情况下从服务器获取，提交数据的一种数据交互方式; 二：Ajax使用步骤概括//1：创建Ajax对象var xhr; //浏览器兼容问题解决if(window.XMLHttpRequest){ xhr = new XMLHttpR
复制链接

扫一扫