关于Ajax

来源：互联网发布：淘宝怎么做详情页编辑：程序博客网时间：2024/05/16 23:33

Ajax(Asynchronous Javascript And XML)是做一个请求，同时利用JS的一个内置对象XHR来实现，因此，Ajax和Jquery一样，并不是一门新的语言。只是通过Ajax,可以从服务器请求数据，将数据动态的渲染到页面上。说到服务器，在学习Ajax之前就要了解一下，服务器和客户端是什么。
服务器：互联网上的某台计算机。
客户端：浏览器
Ajax实现原理类似于：客户端向服务器发出请求(Request),服务器响应(Response）客户端的请求。其中，请求包括:1、请求行，2、请求头，3、请求主体；响应包括:1、状态行,若状态码为200，则表示请求已发送，2、响应头，3、响应主体。请求方式有两种:1、get方式，2、post方式，get方式为同源，post方式为跨域。什么又是同源?同源，协议、IP地址、端口号都相同即为同源，跨域即为非同源。出于安全考虑Ajax要求同源。
接下来看看什么是Ajax。

var xhr=new XMLHttpRequest();//实例化Ajaxxhr.open("get","url地址");//发起http请求xhr.send(null);//由于请求方式为get,因此请求主体为空xhr.onreadystatechange=function(){//接收服务器响应：if(xhr.readyState==4&&xhr.status==200){//readyState:准备状态，4为已准备完毕，status:状态，200为完毕成功console.log(xhr.responseText);//responseText:响应的结果}}

其中，XHMLHttpresquest具有兼容性，IE的写法为:var xhr=new ActiveXObject("Microsoft.XMLHTTP");
Ajax中的其他方法:

var xhr=new XMLResquest();xhr.open();//发起请求，get/postxhr.setResquestHeader();//设置请求头xhr.send();//发送请求主体xhr.onreadystatechange=function(){//xhr.readyState=0;//表示open未调用//xhr.readyState=1;//表示open已调用//xhr.readyState=2;//表示接收到头信息//xhr.readyState=3;//表示接收到响应主体//xhr.readyState=4;//表示响应完毕//xhr.getAllResponseHeaders();//表示获取所有响应头信息//xhr.getResponseHeader("...");//表示获取头信息的指定信息}

以上提到，Ajax中请求方式有两种，第一种为get请求，第二种为post请求，那么接下来看看get请求和post请求两者的区别。
1、post请求:

xhr.open("post","url地址");xhr.setRequestHeader("Content-type","application/x-www-form-urlencode");xhr.send("username=xx&&password=xx");//例子

2、get请求

xhr.open("get","url地址");xhr.send(null);

两者区别：
（1）post请求必须设置请求头：xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencode”);
（2）get请求没有请求主体
（3）get请求可通过在URL上添加参数
（4）post请求可通过xhr.send(“name=xx&&age=xx”);添加参数
（5）get请求效率更好，应用较多
（6）get请求限制大小，约4k，post请求没有限制
打开服务器方法:

var express=require("express");var date=require("./report.js");var app=express();app.use(express.static("./dist");app.get("/report",function(req,res){res.json(data);});app.listen(端口号,"IP地址");

打开服务器必须先有服务器express才可以这种方式打开服务器。
Ajax的数据渲染经常与模板引擎相配合使用。我学习的模板引擎为art-template，因此在这里就和大家看一看art-template模板引擎。
用法:

<div id="tpl"></div><script type="text/template" id="tpl"><ul><li>{{arr[0].name}}</li>//标准语法<li><%=arr[1].name%></li>//原始写法</script><script>var data={"arr":[{"name":"Mike"},{"name":"Sue"}]};var html=template("tpl",data);document.getElementsByTagName("div").innerHTML=html;</script>

if语句的模板引擎写法:

{{if   arr[0].name=="xx"  }}//条件1   <li>{{arr[0].name}}</li>   {{else  if   条件2}}   ......   {{/if}}

循坏语句模板引擎:

{{each  arr}}//arr为要遍历的数组<li>{{$value.name}}</li><li>{{下标:$index,值:{{$value.name}}</li>{{/each}}

Ajax的封装原理:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <script type="text/javascript">            function Ajax(option){                var dataType=option.dataType||"jsonp";//请求类型：json为同源,jsonp为跨域                var type=option.type||"get";//请求方式，get/post                var data=option.data||"";//请求的数据                if(!option.url){                    console.error("url参数缺少");                    return;                }                var url=option.url;//请求的地址                var dataStr="";                for(var key in data){                    dataStr+=key+"="+data[key]+"&";//循环地址                }                dataStr=dataStr.slice(0,-1);//将最后一位&去除                if(dataType=="json"){//判断传入的请求类型                    if(XMLHttpRequest){//判断浏览器类型                        var xhr=new XMLHttpRequest;                    }else{                        var xhr=new ActiveXObject("Microsoft.XMLHTTP");                    }                    if(type=="get"){//判断请求方式                        xhr.open("get",url+"?"+dataStr);                        xhr.send(null);                    }else if(type=="post"){                        xhr.open("post",url);                        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");                        xhr.send(dataStr);                    }                    xhr.onreadystatechange=function(){                        if(xhr.readyState==4&&xhr.status==200){                            option.success(xhr.responseText);                        }                    }                }                if(dataType=="jsonp"){                    var callback="ajax"+new Date().getTime().Math.random().toString().slice(2);                    window[callback].function(data){                        option.success(data);                        document.body.removeChild(script);                    }                    var script=document.createElement("script");                    if(dataStr==""){                        script.src=url+"&callback"+callback;                    }else{                        script.src=url+"?"+dataStr+"&callback="+callback;                    }                    document.body.appendChild(script);                }            }        </script>    </body></html>//调用方式//ajax({//              "dataType":"jsonp",//请求类型：json为同源，jsonp为跨域//              "type":"get",//请求方式:get/post//              "url":"xxxxx",//IP地址//              "success":function(data){//成功需要执行的代码块//                  //              },//              "data":{//相关数据//                  "format":2,//                  "cityname":"xxx";//                  "key":"xxx"//              }//          })

阅读全文

0 0