Javascript之Ajax基础知识

Ajax：async javascript and xml  异步的JS和XML

    -> 客户端JS中的方法，用来向服务器端发送请求(还能够传递给服务器端数据)，而后把服务器端返回的内容获取到(ajax通常是运行在客户端的浏览器中的)

Ajax四步：

    建立一个AJAX对象(下面的这种写法在IE6及更低版本的浏览器中不支持)

    -> var xhr = new XMLHttpRequest;

    发送前的基本信息的配置：get：配置请求的方式，url：打开一个url地址(配置向服务器端地址发送请求)，false：同步请求，true：异步请求，默认是true；[username]向服务器提供请求的用户名；[userpass]：向服务器提供请求的用户密码；后面两个值通常都不写，只有服务器作了安全的限制，只容许特定的用户访问的话，咱们才须要传递

    -> xhr.open("get",url,false,[username],[userpass])

    给onreadystatechange事件绑定一个方法，监听状态的改变(只要状态改变，就会触发此方法的执行)

    -> xhr.onreadystatechange = function(){

        0 UNSENT：当前的请求尚未发送

        1 OPENED URL地址已经打开(发送前的参数配置已经完成)

        2 HEADERS_RECEIVED 响应头信息已经接受

        3 LOADING 主要返回的内容正在服务器端进行准备处理

        4 DONE 响应主题的内容已经成功返回到客户端

        xhr.status：HTTP网络状态码，描述了服务器响应内容的状态

            200 OR ^2\d{2} (200或者以2开头的)：都表明响应主体的内容成功

            301 -> 永久重定向/永久转移

            302 -> 临时重定向/临时转移  服务器的负载均衡

            304 -> 本次获取的内容是读取缓存中的数据

            400 -> 客户端传递给服务器端的参数发生错误  

            401 -> 无权限访问

            404 -> 客户端访问的地址不存在

            500 -> 未知的服务器错误

            503 -> 服务器已经超负荷

        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){

           var val =  xhr.responseText;

        }

    }

    发送请求：参数是请求主体中传递给服务器的内容

    -> xhr.send(null);

 

xml：可扩展的标记语言(在XNL文件中使用的标签都是本身扩展的)

    -> 利用本身扩展的有规则的标记来存储相关的数据

 

//-> HTTP METHOD: 客户端服务器端发送请求的方式
    // -> 如下的请求方式无论哪种均可以向服务器传递数据,也能够从服务器获取到数据,并且从本质意义上讲如下的方式是没有任何的区别的,例如:用POST作的事情,用GET也能作,
    // 而咱们给你们接下来说的区别都是目前开发这门约定俗称的规范:
    //GET:通常应用于从服务器获取数据(给服务器的数据少,从服务器拿的数据多,项目中最经常使用的请求方式就是GET)
    //使用GET请求给服务器传递内容通常都使用URL问号传参的方式
//    xhr.open("get","/getList?num=12");
    //POST:通常应用于向服务器推送数据(给服务器的多,从化服务器拿的少)
    //使用post请求给服务器传递内容咱们通常都是用请求主体的方式传递给服务器
//    xhr.open("post","/getList");
//    xhr.send('{"name":"zhufeng","age":"7"}');
    
    //PUT:通常应用于给给服务器上增长资源文件(上传图片功能)
    //DELETE:通常应用于从服务器上删除资源文件
    //HEAD:通常应用于只获取服务器的响应头信息

 

GET PK POST:

    大小问题：get请求传递给服务器的内容存在大小的限制，post理论上是没有限制，缘由是由于get是经过url传参给服务器，而每一个浏览器对于URL的长度存在限制，谷歌8KB，火狐1KB，IE2KB的长度限制，若是超出长度限制，浏览器会把超出的部份内容截取；

    缓存问题：get请求会出现缓存(这个缓存不必定是304)，post是没有缓存的；在项目中咱们的GET请求通常不会让其出现缓存“清除缓存”：在URL后面追加一个随机数

    xhr.open("get", "/getList?name=12&_=" + Math.random())

    安全问题：通常来讲GET不安全，而POST相对安全一些