关于Ajax

最新推荐文章于 2020-03-03 14:37:35 发布

原创最新推荐文章于 2020-03-03 14:37:35 发布 · 226 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #异步

js&jq 专栏收录该内容

27 篇文章

订阅专栏

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();//实例化Ajax
xhr.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/post
xhr.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"
//              }
//          })