JS_Ajax基础

原创 2016年08月30日 19:19:00

一: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认知深入学习

版权声明:本文为博主原创文章,未经博主允许不得转载。

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js 登陆ajax请求

#login{ margin: 150px auto; list-style: none; border-radius: 30px; } #login{ w...

用基本的JS进行Ajax请求

之前在项目中使用ajax都是通过JQuery的Ajax API来进行的,今天试了一下通过基本的Javascript来进行ajax请求,将代码记录下来:jsp 页面 > ...
  • dncts
  • dncts
  • 2011年02月16日 22:22
  • 54983

Ajax原理及用原生js实现Ajax应用

什么是Ajax? Asynchronous JavaScript and XML 浏览器与服务器之间进行异步交互无需刷新页面的技术 Ajax原理1. 获取XMLHTTPRequest对象HTML按钮 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

JQuery和Js中,如何让ajax执行完后再继续往下执行?(已解决,示例)

查了不少资料,最后,还是jquery指南的书上找到了详细的参数(async: false,),做好后,示例码放上。   $.ajax        ({             cach...
  • dxnn520
  • dxnn520
  • 2012年12月17日 11:26
  • 14246

前台通过js 写个ajax请求把数据传给后台,然后后台接收到这个数据, 再保存到数据库。。

//前端js操作: function testAjax(){ var url="/testAjaxUrlJson/";//后台接收处理url var txtContent= "textprm";...

JavaScript、Ajax与jQuery的关系

简单总结: 1、JS是一门前端语言。 2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。 3、jQuery是一个框架,它对JS进行...

实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:       (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.       (2)创建一个新的HTT...

原生js实现Ajax实例讲解

Ajax简介ajax = 异步 JavaScript 和 XML。 ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。我们知道,传统的网页(不使用ajax)如果需要更新内容,必须...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS_Ajax基础
举报原因:
原因补充:

(最多只允许输入30个字)