关闭

JS_Ajax基础

标签: javascriptajax异步
684人阅读 评论(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认知深入学习

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:49041次
    • 积分:868
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:0篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论