JavaScript基础 Ajax

Ajax

Asynchronous Javascript And XML（异步 JavaScript 和 XML）是指一种创建交互式网页应用的网页开发技术

为什么用来学习Ajax？

因为学习ajax能让客户端跟服务端的交互更优雅。

学习Ajax有什么好处？

在没有ajax之前，客户端向服务端发起请求，比如需要提交表单数据，可以使用form表单，但是form表单在提交时，会刷新整个页面，用户的体验极其差！

so：

1. ajax可以局部刷新页面，无需重载整个页面，节约资源。
2. ajax异步加载，无需经历同步等待的无奈。
3. 第三..... 没有第三，上面两点已经足够形容ajax的牛逼之处了。

需要注意的是：

ajax不能跨域，跨域需要服务端进行相应的设置，总之，不是你前端操心的事！

如果需要跨域，前端可以使用jsonp技术（下节课的装逼内容）

何为异步？

总所周知，javascript是同步的，就是同一时间只能做一件事，而异步则是多个需求可以同时进行，看起来很牛逼。但是异步不一定是好事，是好是坏看需求来，滥用异步，不能处理好事件顺序，会陷入恐怖的无限回调之中。

ok，扯了这么多，ajax到底难不难？

使用ajax技术：

//ajax的使用极其简单，只有4步：
1.创建ajax对象  xhr = new XMLHttpRequest();
2.建立请求      xhr.open(type,url,boolean)  //type请求方式（Get or post） url(后台接口) bool(是否异步 true是异步，false则同步)
3.发送请求      xhr.send();
4.监听状态码         xhr.onreadystatechange=function(){}
//结束

状态码

xhr.readyState
    *        状态码  0 1 2 3 4
    *
    *        0: 请求还没有建立
    *        1：请求建立了，还没有进行发送
    *        2：请求正式发送(xhr.send()执行了)
    *        3：请求接收，同时又一部分数据可以使用了(数据并没有全部处理好)
    *        4：请求已经完全受理

GET

//get方式不需要设置请求头，数据是跟在URL？后面
例如：

'url?name=123&age=18&sex=man'

实例：

 
        

            用户名：
        
        

            年龄：
        
        

            性别：
        
        发送
        
    

php文件

Animation.gif

POST请求

post需要设置请求头（数据格式）
发送的数据需要放到send里
xhr.open("post" , "url");
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);

post请求头的几种常用数据格式

1.application/x-www-form-urlencoded

#浏览器的原生 form 表单，如果不设置 enctype属性，那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

在POST提交数据中Content-Type 被指定为 application/x-www-form-urlencoded；提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。很多时候，我们用 Ajax 提交数据时，也是使用这种方式。

2.multipart/form-data

#这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctype 等于这个值。
这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。上面提到的这两种 POST 数据的方式，都是浏览器原生支持的。

3.application/json

#用来告诉服务端消息主体是序列化后的 JSON 字符串。
由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

4.text/xml

#它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范
它的使用也很广泛，能很好的支持已有的 XML-RPC 服务。不过，XML 结构还是过于臃肿，一般场景用 JSON 会更灵活方便。

GET和POST有哪些区别？

• get:常见的请求，通常用于向服务器查询信息，数据是拼接在接口的后面；
  数据由于拼接在后面，所以可能 在浏览器的地址栏看到
  域名与数据在加？
• post 发送的数据放在send()里面，不需要加？
  需要设置请求头

1.get方式为什么网上说，传输的数据有上限

(1).URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
(2).POST是没有大小限制的，HTTP协议规范也没有进行大小限制，起限制作用的是服务器的处理程序的处理能力。

2.获取数据和发送数据

GET和POST都可以进行数据的获取和发送。

3.安全性

其实都不安全
GET的数据可以在url里明文显示出来，
POST的虽然在url里看不到，但是使用一些工具一样能看到，所以都不安全

那么到底使用哪一种方式比较好呢？

这个以跟后端人员商量的结果为准！

通常，查询或者获取使用GET方式，因为GET获取时，通常是有个幂等性(幂等通常可以理解为多次操作会得到等效结果的情况。或者不同时间的操作对结果不会有影响。)

而POST无法保证幂等，所以需要修改服务器状态可以使用POST

GET缓存问题

GET请求数据时会在本地缓存下来，当请求同一个url时，GET会直接调用本地缓存，当后台数据更新了，GET就不会得到
解决方法就是 在数据后面加上时间

url += '?' + data + '_=' + new Date().getTime()  //

image.png

后面加这个时间戳地址每一次都会不一样，请求都一样的数据 所有每次都会返回数据

案例 快递单号查询

    
        
        
        
        
    
    
        

            
            查询
            

                

                    
提示信息
                    

                
                

                    
快递公司
                    

                
                

                    
单号
                    

                
                

                    
序号
                    
物流情况（倒叙）
                
                

                    

                        
                            
                            
                        
                        
                            
                            
                        
                        
                            
                            
                        
                    
                
            
        
        

    

Animation.gif

封装

var aInp = document.getElementsByTagName( 'input' ),
            btn = document.getElementsByTagName( 'button' )[0];

            /*
                封装：
                    传值：
                        type      get  post （必填）
                        url       1.php
                        aysn      异步  同步
                        data      date = 'user='+ user + '&age=' + age + '&sex='+ sex;
                        success    成功时回调函数
                        error      失败时回调函数
             */


        btn.onclick = function (  ) {
            var json = {};
            json[aInp[0].name] = aInp[0].value;
            json[aInp[1].name] = aInp[1].value;
            json[aInp[2].name] = aInp[2].value;
            console.log( json )
            ajax(
                {
                    type : 'get',
                    url : '1.php',
                    aysn : true,
                    data : json,
                    success : function ( msg ){  //成功时回调函数
                        console.log( msg )
                    },
                    error : function ( tStatus ){  //失败时回调函数
                        console.log( tStatus )
                    }
                }
            );

        }



            function ajax( obj ){
                //处理数据
                var type = obj.type || 'get',
                    url = obj.url || '',
                    aysn = obj.aysn !== false,   //obj.aysn 没有传值的时候 undefined
                                                // undefined !== false  ===>true
                                                // false !== false   ===>false
                                                // true !== false    ===>true
                    data = obj.data || '';      //处理一下data没有传值的时候
                if( data ){ //判断一下data有没有值  有值就遍历出来
                    var str = '';
                    for (var key in data){
                        str += key + '=' + data[key] + '&';
                    }
                    data = str;
                }

                if( /get/i.test(type) ){ //正则判断一下是不是GET的时候
                    url += '?' + data + '_=' + new Date().getTime()
                }
                var xhr = new XMLHttpRequest();
                    xhr.open( type , url , aysn );
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    xhr.send( data );
                    xhr.onreadystatechange = function (){
                        if( this.readyState === 4 ){
                            var tStatus = this.status;
                            if( tStatus >=200 && tStatus<300 || tStatus === 304 ){
                                obj.success && obj.success( this.responseText );
                            } else {
                                obj.error && obj.error( tStatus )
                            }
                        }
                    }
            }

案例实现瀑布流

Animation2.gif