ajax

首页 > 代码库 > ajax

2024-08-24 12:57:10 218人阅读

1 什么是ajax

　　ajax的直译是异步js和xml，即使用js和服务器进行通信，传输的数据形式不单单是xml。

　　异步交互指的是发送一个请求后，无需等待服务器的响应就可以发送第二个请求。ajax的另一个优点在于可以进行局部刷新，类似功能比如百度输入一个字会有10相关联系跳出。

　　技术分享

2 AJAX的优缺点

　　优点：

AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

　　缺点：

AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

3 创建ajax

　　js下的ajax创建：（注重原理，实际不应用）

 1 <script>
 2     function createXMLHttpRequest() {
 3         var xmlHttp;
 4         xmlHttp = new XMLHttpRequest();
 5         return xmlHttp
 6     }
 7     function func1() {
 8         var xmlHttp = createXMLHttpRequest();
 9 {#        step4        #}
10         xmlHttp.onreadystatechange=function () {
11             if (xmlHttp.readyState==4 && xmlHttp.status==200)
12             {
13                 var data =http://www.mamicode.com/ xmlHttp.responseText;
14                 alert(data)
15             }
16 
17         };
18 {#        step2      #}
19         xmlHttp.open("GET","/ajax_receive/",true);
20 {#        step3  #}
21         xmlHttp.send(null);
22     }
23 </script>

　　上述代码中的第一个函数就是step1创建了一个XMLHttpRequest对象的函数。函数名字不定，在随后的function1函数中实例化了这样的一个对象。

　　step2使用对象打开了服务器的连接。参数设置为请求方式，URL，后方的true是默认值指的是使用异步方式。

　　step3向服务器发送一个数据。这里用的是get方式所以应该为空，火狐浏览器空时null，为了兼容火狐所以写成null。（若想发送数据加在URL后面）

　　step4监听服务器的响应。data是返回来的数据。

　　注意：

　　　　IE5，6版本过低，因此创建核心对象的时候有以下代码：

 1 function createXMLHttpRequest() {
 2         var xmlHttp;
 3         // 适用于大多数浏览器，以及IE7和IE更高版本
 4         try{
 5             xmlHttp = new XMLHttpRequest();
 6         } catch (e) {
 7             // 适用于IE6
 8             try {
 9                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
10             } catch (e) {
11                 // 适用于IE5.5，以及IE更早版本
12                 try{
13                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
14                 } catch (e){}
15             }
16         }            
17         return xmlHttp;
18     }

View Code

　　　　若请求方式为post时：

xmlHttp.open("GET","/ajax_receive/",true);

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send("name=alex")

　　　　其中中间一步是设置的请求头中的内容类型。在form表单中也有这个值只不过那里有默认值。并且要想发送成功需要和表单一样的道理：由于防跨站请求攻击需要关掉这一机制，或者添加。。。

　　　　因为URL编码的原因。发送过去的不是一个字典，就是字符串，中间用&连接。发送到后端后变为了name="alex"

　　　　核心对象中的readystate为0-4共5步：

0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；

1：请求已开始，open()方法已调用，但还没调用send()方法；

2：请求发送完成状态，send()方法已调用；

3：开始读取服务器响应；

4：读取服务器响应结束。

　　　　所以当执行到第四步的时候才能接受到服务器的数据。核心对象的另一个属性status是浏览器状态码200是OK。

　　　　post用户名提前验证的栗子：

 1 <body>
 2 <form method="post">
 3     username：<input name="username" type="text" id="inp" value="http://www.mamicode.com/ccc">
 4     pwd：<input name="pwd" type="text" id="inp" value="">
 5 </form>
 6 <script>
 7     var inp = document.getElementById("inp");
 8     var spa = document.getElementById("sap");
 9     var username = inp.value;
10     inp.onblur=function () {
11 
12         var xmlHttp = createXMLHttpRequest();
13         xmlHttp.onreadystatechange=function () {
14             if (xmlHttp.readyState==4 && xmlHttp.status==200)
15             {
16                 var data =http://www.mamicode.com/ xmlHttp.responseText;
17                 alert(data)
18                 }
19             }
20 
21         };
22         xmlHttp.open("POST","/deal/",true);
23         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
24         xmlHttp.send("name="+username);  
25         function createXMLHttpRequest() {
26         var xmlHttp;
27         xmlHttp = new XMLHttpRequest();
28         return xmlHttp
29     }
30 </script>
31 </body>

用户验证

　　4 jQuery下的ajax

　　$.get 和 $.post

　　　　两种快捷方式：

　　　　$.get(url, [data], [callback], [type])

　　　　$.post(url, [data], [callback], [type])

function testWithCallback() {
        $.get(‘/user/allusers‘,{a:2,b:3}, function (data, callbacktype, jqXHR) {
            console.log(data);
            console.log(callbacktype);
            console.log(jqXHR);
        });
    }

　　　　以上是一个完整的get的方式。其中function是回调函数，是服务器穿过来的数据。第一个是数据，第二个是状态关键字，第三个是xml核心对象。第四个是发送给后端告诉服。务器我要接收的是什么样的数据类型。以下的都是上两者的变形，只不过数据类型规定好了。

　　$.getScript()和$.getJSON()

　　　　$.getScript

function testGetScript() {
        // alert(testFun(3, 4));
        $.getScript(‘test.js‘, function () {
            alert(add(1, 6));
        });
    }

// test.js
function add(a,b){
   return a+b
   }

　　　　getscript是指获得js静态文件。这样使用的优点是没必要每次访问都要加载没用到的js文件，当用到的时候在去加载。

　　　　getjson详见6，7节

　　5$.ajax

　　get和post都是上层指令，有供详细的参数可在ajax中设置。

　　以下包括了大部分的参数。

$.ajax({
        url:‘/user/allusers‘,
        type:"GET",// 跨域只能用get
        datatype:"jsonp",
        data:JSON.stringify({a:2,b:3}),
        contentType:"application/json",//x-www-form-urlencoded默认为这个
        //traditional:"true"  数据有数组时用到 b:[2,3] false时b[],[2,3]
        processData:"true",  // 默认为真 禁止进行URL转化 否则转化为b:2&b:3
        dataFilter:function (data) {
            console.log(data)
        }, // 对传过来的数据进行预处理。
        beforeSend:function (jqXHR,settings) {
            console.log(arguments)
        },  // 发送前对核心对象进行设置函数中写设置的内容
        success:function (data,text,jqXHR) {
            console.log(data)
        },//成功后执行的函数
        error:function () {
            console.log(arguments)
        },// 报错是运行的函数 有三个参数核心对象，状态字符串，和错误信息
        complete:function (xhr) {
            console.log(xhr)
        },// 无论成功还是失败都会执行
        jsonp:"callbacks",//跨域传送
        jsonCallback:function (fetch) {
            console.log(fetch)
        }//也可以是一个函数名字，这是跨域处理函数。
            }
    )

　　6JSON

　　json是一种轻量化的数据交换格式，而且是js的。json用字符串来表示对象，所以在Python中json文件中依然能看出来类似一个字典的模式。在没有loads之前都时候字符串。

　　json字符串不同于一般的字符串，是有着json自己的结构的。写成json字符串的形式可以不用dump直接load。形式：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

parse用于从一个字符串中解析出json对象,如

var str = ‘{"name":"yua","age":"23"}‘

结果：

JSON.parse(str)

Object

age: "23"
name: "yua"


注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。


stringify()用于从一个对象解析出字符串，如

var
 a = {a:1,b:2}

结果：

JSON.stringify(a)

"{"a":1,"b":2}"

　　7跨域请求

　　通俗的来说：在自己的服务器上跑的一个页面想要访问其他服务器的数据称为跨域请求。（本机上的端口号不一样也是跨域）

　　浏览器的设置有同源策略这一概念：同一域名，协议，端口。非同源的必须要授权才能去访问。这是一种保护隐私的方法。

　　　　jsonp

　　　　jsonp是一种解决跨域请求的一种非官方的协议。了解他的实现形式有助于深度学习。只能用get方式。

　　　　原理：

　　虽然URL，href等不能直接写入非同源的请求，但是<script src=http://www.mamicode.com/></script>可以访问。利用这一点：

　　这样便访问到了另一个端口的数据，返回回来一个数据“hello”。但是浏览器会报错显示hello错误。原来这种的返回方式是直接返回数据到了js代码中，由于hello没有定义报错。

　　 <script>hello</script>

　　所以只要在hello外边在拼接一个函数进行运行即可，因此要求访问端有一个专门的函数处理，服务端也要将返回形式变为函数运行的方式。

　　服务器若是返回：

　　 func1("hello")

　　这样若是再在访问端有函数func1变回执行这个函数，只要在函数中对hello进行处理就行。这就是jsonp的原理，形象地表示为json+padding。

　　jQuery下的jsonp

<script type="text/javascript">
    $.getJSON("http://127.0.0.1:8002/get_byjsonp?callback=?",function(arg){
        alert("hello"+arg)
    });
</script>

　　　　除了直接将回调函数放在了里面外，多了一个callback参数。这个参数后面问号会随机一个字符串，成为了发送端的函数名字（func1）。但是处理数据的时候会用到回调函数。当然要是已经规定好了要用某个函数，可以通过上面的ajax中参数设置。

ajax

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > ajax

ajax

1 什么是ajax

2 AJAX的优缺点

3 创建ajax

注意：

4 jQuery下的ajax

$.get 和 $.post

$.getScript()和$.getJSON()

5$.ajax

6JSON

7跨域请求

jsonp

原理：

jQuery下的jsonp

看完仍有疑问？有类似问题直接问程序猿

　　注意：

　　4 jQuery下的ajax

　　$.get 和 $.post

　　$.getScript()和$.getJSON()

　　5$.ajax

　　6JSON

　　7跨域请求

　　　　jsonp

　　　　原理：

　　jQuery下的jsonp