拉长用户体验,那种技能能够想服务器请求额外的多寡而无须卸载页面(即刷新)

a.什么是Ajax
    Asynchronous JavaScript and XML(异步JavaScript和XML)
    节省用户操作,时间,进步用户体验,收缩数量请求
    传输获取数据
b.使用Ajax:
    使用ajax获取某一文书文件的始末
    
c.Ajax进程详解:
    成立对象XMLHttpRequest()
    Date()对象
    ActiveXObject(‘Microsoft.XMLHTTP’)

Ajax:

内容提纲:

1.例:
<script>
window.onload = function() {
    var oBtn = document.getElementById(‘btn’);
    oBtn.onclick = function() {
        //打开浏览器
        var xhr = new XMLHttpRequest();
        //在地方栏输入地方
        xhr.open(‘get’,’1.txt’,true);
        //提交
        xhr.send();
        //等待服务器再次回到内容
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                alert( xhr.responseText );
            }
        }
    }
}
</script>
<body>
    <input type=”button” value=”按钮” id=”btn” />
</body>

Ajax是指一种创设交互式网页应用的网页开发技术。不要求进进刷新,完毕与服务器举办数据通讯。Ajax能够使网页达成异步更新,这象征能够在不重复加载整个网页的图景下,对网页的某某个开始展览翻新。

 

2.异常
<script>
    //alert(a);
    try {
        //代码尝试进行那个块中的内容,若是有错误,则会实施catch{},  
 并且传入错误音讯参数
        //alert(a);
        //new throw();
        //throw new Error(‘错了错了’);
    } catch (e) {
        alert(e);
    }
    alert(‘到那边了’);
</script>

根据原生的JavaScript达成Ajax: 

1.XMLHttpRequest

3.异步同步
①<script src=”jquery.js”></script>
<script>
//$(function(){})    //阻塞 -> 同步
                  
 //阻塞:当前面一件事没做完的图景下,阻塞后边代码的进行
                
/*setTimeout(function() {
    alert(1);        //非阻塞 – 异步
}, 贰仟);           //非阻塞:先弹出2,2s后再弹出1
alert(2);*/

XmlHttpRequest对象:

 

4.伸手状态监察和控制
                onreadystatechange事件
                readyState属性:请求状态
                0    (初步化)还平素不调用open()方法
                1    (载入)已调用send()方法,正在发送请求
                2    (载入完结)send()方法成功,已接受全部响应内容
                3    (解析)正在条分缕析响应内容
                4    (完结)响应内容分析达成,能够在客户端调用了
                status属性:服务器(请求能源)的意况
                再次来到的内容
                responseText:再次回到以文件情势存放的内容
                responseXML:再次回到XML方式的内容

  XmlHttpRequest对象的基本点方法:

 

void open(String method,String url,Boolen async)
   用于创建请求
   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)

void send(String body)
    用于发送请求
    参数:
        body: 要发送的数据(字符串类型)

void setRequestHeader(String header,String value)
    用于设置请求头
    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)

String getAllResponseHeaders()
    获取所有响应头
    返回值:
        响应头数据(字符串类型)

String getResponseHeader(String header)
    获取响应头中指定header的值
    参数:
        header: 响应头的key(字符串类型)
    返回值:
        响应头中指定的header对应的值


XmlHttpRequest对象的主要属性:

 

a. Number readyState
   状态值(整数)
   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;

b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)

c. String responseText
   服务器返回的数据(字符串类型)

d. XmlDocument responseXML
   服务器返回的数据(Xml对象)

e. Number states
   状态码(整数),如:200、404...

f. String statesText
   状态文本(字符串),如:OK、NotFound...

 

程序:

(1)GET形式呼吁:

客户端:

<body>

  <input type=”text”
/>

  <input type=”button” value=”Ajax1″ onclick=”Ajax1();”
/>

<script>

function Ajax1(){

   var xhr = new
XMLHttpRequest(); //
创建XMLHttpRequest对象

   xhr.open(‘GET’,’/ajax_json/’,true);

  xhr.onreadystatechange = function(){

  if(xhr.readyState ==
4){//
接收实现

  var obj = JSON.parse(xhr.responseText);
console.log(obj)

      }

    };

 

  xhr.setRequestHeader(‘k1′,’v1’); // 设置数据头

  xhr.send(“name=root;pwd=123”);

  }

</script>

</body>

劳务器端:

  def ajax_json(request):

    print(request.GET)

    ret = {‘code’:True, ‘data’:None}

    import json

    return
HttpResponse(json.dumps(ret),status=404,reason=’Not Found’) #
定义状态码及气象消息

    return
HttpResponse(json.dumps(ret))

(2)POST格局请求

 

 客户端:

<body>

  <input type=”text”
/>

  <input type=”button” value=”Ajax1″ onclick=”Ajax1();”
/>

<script>

function Ajax1(){

   var xhr = new
XMLHttpRequest(); //
创建XMLHttpRequest对象

   xhr.open(‘GET’,’/ajax_json/’,true);

  xhr.onreadystatechange = function(){

  if(xhr.readyState
== 4){//
接收实现

  var obj = JSON.parse(xhr.responseText);
console.log(obj)

      }

    };

  xhr.setRequestHeader(‘k1′,’v1’); //
设置数据头

  xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded;
charset-UTF-8’);

  xhr.send(“name=root;pwd=123”);

  }

</script>

</body>

基于jquery实现:

   function add_student_byajax() {
            $('#ajax_add').click(function () {
             //获取要发送的数据
              var sel = $('#sel').val();
              var id = $('form').find('input[name="id"]').val();
              var name = $('form').find('input[name="name"]').val();
              var gender = $('form').find('input[name="gender"]').val();
              var age = $('form').find('input[name="age"]').val();
              var email = $('form').find('input[name="email"]').val();

                $.ajax({
                    url:'/app/add_student/',//设置url
                    type:'POST',//设置发送的方式
                    dataType:'JSON',//设置要接收的数据类型
                    data:{//设置要传送的数据
                        name:name,
                        age:age,
                        gender:gender,
                        email:email,
                        cls:sel,
                        id:id
                    },
                    success:function (obj){//执行成功后执行的回调函数,obj为服务器端返回的数据对象
                        if(!obj.status){
                            $('#er').text(obj.error)
                        }else {
                             location.href='/app/student/';
                        }
                    }
                })
            })
        }

 

 服务器端:

def add_student(request):
    if request.method =='GET':
        print(234)
        return HttpResponse('ok')

    elif request.method == 'POST':
        data={
            'status':True,
            'data':None,
            'error':None
        }
        name = request.POST.get('name')
        age = request.POST.get('age')
        gender = request.POST.get('gender')
        email = request.POST.get('email')
        cls = request.POST.get('cls')
        nid = request.POST.get('id')
     data['status']=True
        models.Student.objects.create(name=name, age=age, gender=gender, email=email, cls_id=cls)
        return HttpResponse(json.dumps(data))

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.GET与POST

    window.onload = function() {
    var oBtn = document.getElementById(‘btn’);
    oBtn.onclick = function() {
    (一)//打开浏览器
        /*
            1.开立八个ajax对象
                ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’)
        */
        var xhr = null;
        /*if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
        }*/
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
        }
    (二)//在地方栏输入地点
        /*
            open方法
            四个参数含义:
                1.打开药格局 Form-method
                2.地址 Form-action
                3.是否异步
                    异步(true):非阻塞–>
前边的代码不会影响前边代码的履行
                    同步(false):阻塞–>
后面包车型地铁代码会潜移默化后边代码的进行
                   
同步与异步分歧:同步:当后续的代码要求运用前边东西的时候,能够用到一同,
                                  
 同步情势用的较少,因为能够因而事件回调的花样开展拍卖
                                  
 异步:一般境况下,均采用异步,因为不容许为了形成ajax动作,
                                    而把后续代码全体截留掉
        
        */  
//打开药方式:get;地址:1.txt;是还是不是异步:异步–>xhr.open(‘get’,’1.txt’,true);
        xhr.open(‘get’,’1.txt’,true);
      (三)//提交 发送请求
        
        //Send方法
            发送数据请求,相当于Form的submit

 

        //alert(1);
        xhr.send();
        
        //alert(1)
        
        //alert( xhr.responseText );
        
     (四)//等待服务器重返内容
            /*
            readyState : ajax工作情形
            responseText(属性) :
ajax请求重临的始末就被寄放到那么些性格上边
            on readystate change : 当状态值readyState改变的时候接触
            status : 服务器状态(码),http状态码
            */
        xhr.onreadystatechange = function() {
            
            if ( xhr.readyState == 4 ) { //当状态值为4时,把内容取出来
                //容错??处理:判断服务器是或不是成功 2最先的表示成功
                if ( xhr.status == 200 ) {//当状态值OK的时候 执行
                    alert( xhr.responseText );//把内容取出来
                } else {//假使为任何的情景
做一下错误处理,xhr.status:表示错误消息
                    alert(‘出错了,Err:’ + xhr.status);
                }
          }
    }
}
</script>
</head>
<body>
    <input type=”button” value=”按钮” id=”btn” />
</body>
</script>

3.封装Ajax

传递、请求进度中的难点:
    xhr.open(‘post’,’2.post.php’,true);
        //post格局,数据放在send()里面作为参数字传送递
        xhr.setRequestHeader(‘content-type’,
‘application/x-www-form-urlencoded’);//评释发送的数据类型
        //post没有缓存难点
        //无需编码
    xhr.send(‘username=刘伟&age=30’);
取得内容今后应小心的标题:

 

4.1,表单
    表单:数据的交由,向服务器交由数据,比如:提交用户音讯
        action : 数据交由的地点,默许是时下页面
        method : 数据交由的办法,私下认可是get情势
            1.get–通过url地址传输
              
 把数据名称和数目值用=连接,借使有多个的话,那么他会把四个数据整合用&实行连接,然后把数据放到url?后边传出钦命页面
               
传输的数据量:有限定,url长度限制的原由,大家毫不通过get情势传送过多的多寡
                传递的数据类型:仅为字符串
            2.post–经过浏览器内部传输
                传输的数据量:理论上无界定
                传递的数据类型:可二种
        enctype :
提交的数码格式,暗中同意application/x-www-form-urlencoded
①<body>
    
    <form action=”1.get.php”
enctype=”application/x-www-form-urlencoded”>
        <input type=”text” name=”username” />
        <input type=”text” name=”age” />
        <input type=”submit” value=”提交” />
    </form>
</body>

 发文不易,转发请注解链接出处,多谢!

4.2,后端数据接受
    前后台键名和传输格局必须一律
        数据传输方式
        数据获得格局
①后端数据接收–get-$_GET方式 (.php 文件)
               通过U君越L传递给该脚本的变量的数组
    <?php
        header(‘content-type:text/html;charset=”utf-8″‘);
        error_reporting(0);

 

        $username = $_GET[‘username’];
        $age = $_GET[‘age’];

 

        echo “你的名字:{$username},年龄:{$age}”;

 

②<form action=”1.post.php” method=”post”>
        <input type=”text” name=”username” />
        <input type=”text” name=”age” />
        <input type=”submit” value=”提交” />
    </form>
    
②后端数据接收–post-$_POST 方式 (.php 文件)
               通过HTTP POST方法(表单)传递给该脚本的变量的数组
    <?php
        header(‘content-type:text/html;charset=”utf-8″‘);
        error_reporting(0);
        //$_REQUEST—-get post 都可以
        $username = $_POST[‘username’];
        $age = $_POST[‘age’];

二〇〇七年Jesse 詹姆斯 加雷特发布了一篇作品,标题为:“Ajax:A new Approach
to Web
Applications”。他在那篇作品里介绍了一种技术,用她的话说,就叫:Ajax,是Asynchronous
JavaScript +
XML的简写。那种技能能够想服务器请求额外的数额而无须卸载页面(即刷新),会拉动更好的用户体验。一时半刻间,席卷全球。

        echo “你的名字:{$username},年龄:{$age}”;

 

5.json
<script src=”JSON.js”></script>
<script>
/*
JSON :
JSON.js文件中有三种艺术:
        stringify : 能够把1个对象转成对应字符串
        parse : 能够把字符串转成对应对象
*/
//alert(JSON)
//stringify : 能够把两个对象转成对应字符串

 

var arr = [1,2,3];
var j = {left:100};
/*alert( JSON.stringify(arr) );*/
/*alert( JSON.stringify(j) );*/

 

//parse : 能够把字符串转成对应对象
var s1 = ‘[100,200,300]’;
var a1 = JSON.parse(s1);
//alert(a1[0])

一.XMLHttpRequest

var s2 = ‘{“left”:100}’;
var a2 = JSON.parse(s2);
alert(a2.left)
</script>

 

6.ajax正是拿多少,从接口上取数据,把取到的多少依照不一样特色,举行拍卖  
 
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    //alert( xhr.responseText );
                    var data = JSON.parse( xhr.responseText );//转换
                    
                    var oUl = document.getElementById(‘ul1’);//获取
                    var html = ”;//创建HTML
                    //循环当前的数组
                    for (var i=0; i<data.length; i++) {
                        html += ‘<li><a
href=””>’+data[i].title+'</a>
[<span>’+data[i].date+'</span>]</li>’;
                    }
                    oUl.innerHTML = html;//添加后放置oUl.innerHTML里
                } else {
                    alert(‘出错了,Err:’ + xhr.status);
                }
                //从接口上取数据,把取到的多寡依照不相同特色,进行拍卖
                //ajax正是拿多少
            }
        }
6.get格局多个难点
    /*
        1.缓存 在url?前面连接2个随意数,时间戳
        2.乱码 编码encodeURI
    */            //动态文件
        原:xhr.open(‘get’,’1.txt’,true);
      
 改:xhr.open(‘get’,’2.get.php?username=’+encodeURI(‘刘伟’)+’&age=30&’ +
new Date().getTime(),true);
        –>:    + new Date().getTime()
表示前边连接一个任意数,时间戳,能够使数码实时更新
        –>:    ‘2.get.php?username=’+encodeURI(‘Liu Wei’)+’&age=30&’
将乱码举办U科雷傲L编码,表示将汉字转为字符串输出

Ajax技术主旨是XMLHttpRequest对象(简称XHCRUISER),那是由微软第①引入的3个风味,后来任何浏览器供应商都提供了一如既往的落到实处。在XH奥迪Q5出现以前,Ajax式的通讯必须正视一些hack手段来促成,超越57%是运用隐藏的框架或内嵌框架。

7.post格局三个难点
            1.数码放在那?
            2.出殡和埋葬的数据类型?
        xhr.open(‘post’,’2.post.php’,true);
        //post形式,数据放在send()里面作为参数字传送递  
setRequestHeader表示设置请求头,告诉后端发送过去的文书档案类型是何等
        xhr.setRequestHeader(‘content-type’,
‘application/x-www-form-urlencoded’);//申明发送的数据类型
            3.post未曾缓存难题
            4.无需编码
      
 xhr.send(‘username=刘伟(Liu-Wei)&age=30’);//数据放在send()里面作为参数字传送递

 

8.一体化案例

XH凯雷德的面世,为向服务器发送请求和分析服务器响应提供了流畅的接口。能够以异步格局从服务器获取越来越多的新闻,那就代表,用户只要接触某一轩然大波,在不刷新网页的景况下,更新服务器最新的数目。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<title>无标题文档</title>
<script>

 

window.onload = function() {
    var oBtn = document.getElementById(‘btn’);
    oBtn.onclick = function() {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
        }
        /*
        
      
 xhr.open(‘get’,’2.get.php?username=’+encodeURI(‘刘伟’)+’&age=30&’ + new
Date().getTime(),true);
        xhr.send();
        
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert(‘出错了,Err:’ + xhr.status);
                }
            }    
        }
    }
}
</script>
</head>
<body>
    <input type=”button” value=”按钮” id=”btn” />
</body>
</html>

就算如此Ajax中的x代表的是XML,但Ajax通讯和数目格式毫不相关,也等于说那种技术不自然使用XML。

 

 

 

IE7+、Firefox、Opera、Chrome和Safari都补助原生的XHCRUISER对象,在这个浏览器中开创XHXC60对象足以一贯实例化XMLHttpRequest即可。

 

var xhr = new XMLHttpRequest();

 

alert(xhr);                                                      
 //XMLHttpRequest

 

 

 

假设是IE6及以下,那么大家亟须还须要运用ActiveX对象通过MSXML库来贯彻。在低版本IE浏览器恐怕会遇上二种不一致版本的XHLAND对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。大家得以编写制定叁个函数。

 

复制代码

 1 function createXHR() {

 2 

 3        if (typeof XMLHttpRequest != ‘undefined’) {

 4 

 5               return new XMLHttpRequest();

 6 

 7        } else if  (typeof ActiveXObject != ‘undefined’) {

 8 

 9               var versions = [

10 

11                                                                      
‘MSXML2.XMLHttp.6.0’,

12 

13                                                                      
‘MSXML2.XMLHttp.3.0’,

14 

15                                                                      
‘MSXML2.XMLHttp’

16 

17               ];

18 

19               for (var i = 0; i < versions.length; i ++) {

20 

21                      try {

22 

23                             return new ActiveXObject(version[i]);

24 

25                      } catch (e) {

26 

27                             //跳过

28 

29                      }

30 

31               }

32 

33        } else {

34 

35               throw new Error(‘您的浏览器不协助XH本田CR-V对象!’);

36 

37        }

38 

39 }

40 

41  

42 

43 var xhr = createXHR();

44 

45  

复制代码

 

 

在应用XHSportage对象时,先必须调用open()方法,它接受四个参数:要发送的央求类型(get、post)、请求的U途达L和表示是或不是异步。

 

xhr.open(‘get’, ‘demo.php’, false);                      
 //对于demo.php的get请求,false同步

 

 

 

demo.php的代码如下:

 

<?php

 

      echo Date(‘Y-m-d H:i:s’);      //打字与印刷2个岁月

 

?>                        

 

open()方法并不会真正发送请求,而只是运维三个呼吁以备发送。通过send()方法举行发送请求,send()方法接受一个参数,作为请求主体发送的多寡。假使不须求(如用get情势)则必须填null。执行send()方法之后,请求就会发送到服务器上。

 

xhr.send(null);                            //发送请求

 

PS:假设没有向劳动器端发送,火狐firebug无发送提醒,假设有send()方法,则firebug会提示已发送(到火狐中用FireBug调节和测试)。

 

 

 

当呼吁发送到服务器端,收到响应后,响应的数据会自动填充XHENVISION对象的品质。那么一共有八个天性:

 

 

 

属性名

 

说明

 

responseText

 

用作响应大旨被重回的文本

 

responseXML

 

只要响应大旨内容类型是”text/xml”或”application/xml”,则赶回包涵响应数据的XML
DOM文书档案

 

status

 

响应的HTTP状态

 

statusText

 

HTTP状态的认证

 

 

 

收受响应之后,第叁步检查status属性,以彰着响应已经成功再次来到。一般以HTTP状态代码为200当作成功的标志。除了成功的情事代码,还有一对别的状态码:

 

 

 

HTTP状态码

 

情状字符串

 

说明

 

200

 

OK

 

服务器成功重回了页面

 

400

 

Bad Request

 

语法错误导致服务器不识别

 

401

 

Unauthorized

 

伸手供给用户认证

 

404

 

Not found

 

点名的ULacrosseL在服务器上找不到

 

500

 

Internal Server Error

 

服务器境遇意外错误,不能完毕请求

 

503

 

ServiceUnavailable

 

鉴于服务器过载或敬服导致不能到位请求

 

 

 

一般的话,大家看清HTTP状态值即可,不建议选取HTTP状态表达(statusText),因为在跨浏览器的时候,只怕会不太雷同。

 

复制代码

 1 addEvent(document, ‘click’, function () {

 2 

 3        var xhr = new createXHR();

 4 

 5        xhr.open(‘get’, ‘demo.php?rand=’ + Math.random(), false);
 //设置了伙同

 6 

 7        xhr.send(null);

 8 

 9        if (xhr.status == 200) {                            
 //若是重临成功了

10 

11               alert(xhr.responseText);                    
//调出服务器再次来到的数据

12 

13        } else {

14 

15               alert(‘数据再次来到败北!状态代码:’ + xhr.status +
‘状态音讯:’ + xhr.statusText);

16 

17        }

18 

19 });

复制代码

 

 

PS:通过点击事件,不断的向服务器发送请求,然后服务器会实时的回到最新的数据,就是Ajax作用。

 

PS:IE浏览器第3遍会向服务器端请求,获取最新数据,而第三回它就暗中同意获取的是缓存数据,导致数据不是最新的,怎么处理缓存?能够动用JS随机字符串:Math.random()。

 

 

 

上述的代码每一回点击页面包车型大巴时候,重返的岁月都以实时的,表明都以经过服务器及时加载回的数码。那么我们也能够测试一下在非Ajax下的情事。

 

创制一个demo2.php文件,使用非Ajax:

 

复制代码

 1 <script type=”text/javascript” src=”base.js”></script>

 2 

 3 <script type=”text/javascript”>

 4 

 5        add伊芙nt(document, ‘click’, function () {
      //当不断点击页面,再次来到的时刻不产生变化

 6 

 7               alert(“<?php echo Date(‘Y-m-d H:i:s’)?>”);

 8 

 9        });

10 

11 </script>

复制代码

 

 

手拉手调用就算简单,但利用异步调用才是我们的确常用的一手。使用异步调用的时候,必要触发readystatechange事件,然后检查和测试readyState属性即可。这特性情有八个值:

 

 

状态

 

说明

 

0

 

未初步化

 

尚未调用open()方法

 

1

 

启动

 

一度调用open()方法,但绝非调用send()方法

 

2

 

发送

 

业已调用send()方法,但从不接受响应

 

3

 

接受

 

一度接受到某些响应数据

 

4

 

完成

 

早已接受到全方位响应数据,而且能够采纳

 

      

 

//异步形式

 

复制代码

 1 addEvent(document, ‘click’, function () {

 2 

 3        var xhr = new createXHR();

 4 

 5        xhr.onreadystatechange = function () {

 6 

 7               if (xhr.readyState == 4) {

 8 

 9                      if (xhr.status == 200) {

10 

11                             alert(xhr.responseText);

12 

13                      } else {

14 

15                             alert(‘数据再次回到战败!状态代码:’ +
xhr.status + ‘状态新闻:’+ xhr.statusText);

16 

17                      }

18 

19               }

20 

21        };

22 

23        xhr.open(‘get’, ‘demo.php?rand=’ + Math.random(), true);

24 

25        xhr.send(null);

26 

27        //xhr.abort();                //撤销异步请求    

28 

29 });

30 

31  

复制代码

 

 

PS:使用abort()方法能够撤销异步请求,放在send()方法此前会报错。放在responseText从前会得到一个空值。

 

 

 

二.GET与POST

 

在提供服务器请求的进程中,有两种方法,分别是:GET和POST。在Ajax使用的历程中,GET的利用频率要比POST高。

 

在Web程序中:

 

GET一般是UMuranoL提交请求,比如:

 

demo.php?name=Lee&age=100

 

POST一般是Web表单提交, 比如:

 

<form method=”post”>

 

  <input type=”text” name=”name” value=”Lee”>

 

  <input type=”text” name=”age” value=”100″>

 

</form>

 

在询问那二种请求形式前,我们先领悟一下HTTP尾部新闻,蕴涵服务器重临的响应头消息和客户端发送出去的呼吁头新闻。我们得以得到响应头音信(不得以安装)恐怕安装请求头新闻(不能够博得)。大家得以在Firefox浏览器的firebug查看那么些音信。

 

复制代码

 1 addEvent(document, ‘click’, function () {

 2 

 3        var xhr = createXHR();        

 4 

 5        xhr.onreadystatechange = function () {

 6 

 7               if (xhr.readyState == 4) {

 8 

 9                      if (xhr.status == 200) {                        
 

10 

11                             //alert(xhr.getAllResponseHeaders());
          //获取全体响应头音信                         

12 

13                            
//alert(xhr.getResponseHeader(‘Content-Type’));  
   //获取单个响应头音讯

14                      } else {

15 

16                             alert(‘获取数据错误!错误代号:’ +
xhr.status + ‘,错误新闻:’ + xhr.statusText);

17 

18                      }    

19 

20               }

21 

22        };

23 

24        xhr.open(‘get’, ‘demo.php?rand=’ + Math.random(), true);

25        xhr.setRequestHeader(‘myheader’,’Lee’);      
 //设置请求头消息,一般没什么用,在POST提交请求有用

26        xhr.send(null);                    

27 

28 });

复制代码

 

 

PS:大家只可以够博得服务器再次回到回来响应头音讯,不恐怕拿到向服务器交由的呼吁头音信,自然自定义的伸手头,在JavaScript端是无力回天取获得的。

 

 

 

GET请求

 

GET请求是最广泛的呼吁类型,最常用于向服务器询问某个信息。须要时,能够将查询字符串参数追加到U本田UR-VL的结尾,以便提交给服务器。

 

xhr.open(‘get’, ‘demo.php?rand=’ + Math.random() + ‘&name=Koo’, true);

 

 

 

只顾:通过U路虎极光L后的问号给服务器传递键值对数据,服务器收到到接下来回到响应数据。特殊字符传参发生的题材得以行使encodeU福睿斯IComponent()进行编码处理;中文字符的回到及传参,能够将页面保存和设置为utf-8格式即可。

 

 

 

//1个通用的UKugaL提交函数

 

复制代码

 1 function addURLParam(url, name, value) {

 2 

 3        url += (url.indexOf(‘?’) == -1 ? ‘?’ : ‘&’);                  
 //判断的url是还是不是有已有参数

 4 

 5        url += encodeURIComponent(name) + ‘=’ +
encodeURIComponent(value);

 6 

 7        alert(url);

 8 

 9        return url;

10 

11 }

复制代码

 

 

PS:当没有encodeU卡宴IComponent()方法时,在一部分破例字符比如“&”,会并发谬误造成力不从心得到。

 

 

 

代码汇总:

 

demo.php代码部分:

 

复制代码

 1 <?php

 2 

 3        header(‘Content-Type: text/html;charset=utf-8’);

 4 

 5        //echo Date(‘Y-m-d H:i:s’);

 6 

 7        print_r($_GET);

 8 

 9        print_r($_POST);

10 

11       

12 

13        //if ($_GET[‘name’] == ‘Lee’) {

14 

15        //     echo ‘中文’;

16 

17        //}

18 

19        if ($_POST[‘name’] == ‘Lee’) {

20 

21               echo ‘中文’;

22 

23        }

24 

25 ?>

复制代码

 

 

//GET请求

 

复制代码

 1 addEvent(document, ‘click’, function () {

 2 

 3        var xhr = createXHR();        

 4 

 5        var url = ‘demo.php?rand=’ + Math.random();

 6 

 7        url = params(url, ‘name’, ‘Lee’);

 8 

 9        url = params(url, ‘age’, 100);

10 

11        alert(url);

12 

13        xhr.onreadystatechange = function () {

14 

15               if (xhr.readyState == 4) {

16 

17                      if (xhr.status == 200) {

18 

19                             alert(xhr.responseText);

20 

21                      } else {

22 

23                             alert(‘获取数据错误!错误代号:’ +
xhr.status + ‘,错误消息:’ + xhr.statusText);

24 

25                      }    

26 

27               }

28 

29        };

30 

31        xhr.open(‘get’, url, true);

32 

33        xhr.send(null);                    

34 

35 });

36 

37  

38 

39 function params(url, name, value) {

40 

41        url += url.indexOf(‘?’) == -1 ? ‘?’ : ‘&’;

42 

43        url += encodeURIComponent(name) + ‘=’ +
encodeURIComponent(value);

44 

45        return url;

46 

47 }

48 

49  

复制代码

 

 

POST请求

 

POST请求能够分包格外多的数据,大家在应用表单提交的时候,很多正是使用的POST传输格局。

 

xhr.open(‘post’, ‘demo.php’, true);

 

 

 

而发送POST请求的多寡,不会跟在UTiguanL的尾巴上,而是经过send()方法向服务器交由数据。

 

xhr.send(‘name=Lee&age=100’);

 

 

 

相似的话,向服务器发送POST请求由于解析机制的案由,要求展开专门的拍卖。因为POST请求和Web表单提交是差异的,要求利用XH锐界来模拟表单提交。代码如下:

 

xhr.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);

 

 

 

代码汇总:

 

复制代码

 1 addEvent(document, ‘click’, function () {

 2 

 3        var xhr = createXHR();        

 4 

 5        var url = ‘demo.php?rand=’ + Math.random();

 6 

 7        xhr.onreadystatechange = function () {

 8 

 9               if (xhr.readyState == 4) {

10 

11                      if (xhr.status == 200) {

12 

13                             alert(xhr.responseText);

14 

15                      } else {

16 

17                             alert(‘获取数据错误!错误代号:’ +
xhr.status + ‘,错误消息:’ + xhr.statusText);

18 

19                      }    

20 

21               }

22 

23        };

24 

25        xhr.open(‘post’, url, true);                          
//第①步改为post

26 

27        xhr.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);     //第③步,模拟表单提交      

28 

29      xhr.send(‘name=Lee&age=100’);
               //第②步,将名值对放入send方法里(其实也须要像get一样进行编码) 

30 

31 });

32 

33  

复制代码

 

 

PS:从品质上来讲POST请求比GET请求消耗越多一些,用同样数量相比较,GET最多比POST快两倍。

 

 

 

JSON数据也能够行使Ajax来回调访问:

 

var url = ‘demo.json?rand=’ + Math.random();

 

var box = JSON.parse(xhr.responseText);

 

 

 

三.封装Ajax

 

因为Ajax使用起来比较麻烦,主要正是参数难题,比如到底使用GET照旧POST;到底是运用同步照旧异步等等,我们须要封装1个Ajax函数,来便宜大家调用。部分主导代码如下:

 

//封装ajax

 

复制代码

 1 function ajax(obj) {

 2 

 3        var xhr = createXHR();

 4 

 5        obj.url = obj.url + ‘?rand=’ + Math.random();

 6 

 7        obj.data = params(obj.data);

 8 

 9        if (obj.method === ‘get’) obj.url += obj.url.indexOf(‘?’) ==
-1 ? ‘?’ + obj.data : ‘&’ + obj.data;          //1.GET形式发送数据

10 

11        if (obj.async === true) {                    
//异步方式会执行那儿

12 

13               xhr.onreadystatechange = function () {

14 

15                      if (xhr.readyState == 4) {

16 

17                             callback();                      
 //调用callback函数

18 

19                      }

20 

21               };

22 

23        }

24 

25        xhr.open(obj.method, obj.url, obj.async);

26 

27        if (obj.method === ‘post’) {     //2.POST格局发送数据

28 

29               xhr.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);

30 

31               xhr.send(obj.data); 

32 

33        } else {

34 

35               xhr.send(null);

36 

37        }

38 

39        if (obj.async === false) {     //同步方式会履行那儿

40 

41               callback();                                      
 //调用callback函数回调

42 

43        }

44 

45        function callback() {                            
 //封装为callback函数,方便地点调用

46 

47               if (xhr.status == 200) {

48 

49                      obj.success(xhr.responseText);      
//调用obj的success方法回调传递参数

50 

51               } else {

52 

53                      alert(‘获取数据错误!错误代号:’ + xhr.status +
‘,错误消息:’ + xhr.statusText);

54 

55               }    

56 

57        }

58 

59 }

http://www.bkjia.com/Javascript/780547.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/780547.htmlTechArticle内容提纲: 1.XMLHttpRequest 2.GET与POST
3.封装Ajax 发文不易,转发请注解链接出处,多谢! 二零零五年Jesse James加雷特发布了一篇小说,标题为:Ajax:…

相关文章