Ajax

1. 什么是ajax

    Ajax是一种传输的工具，实现异步和同步的传输模式。

    Ajax常用的是异步，异步是指刷新页面时，使网页实现异步更新。这意味着可以在不重新加载整个网 页的情况下，对网页的某部分进行更新。

    有很多使用 AJAX 的应用程序案例：京东、app 的揽加载等都是异步传输实现数据的交互。

    实现ajax分为以下部分：js，jq，框架三个部分。

2.  ajax的在js中的使用

    第一步，创建ajax对象，IE和火狐的方法是不同的

        （1）IE中通过newActiveXObjact（）,而火狐与谷歌是通过newXMLHttpRequest()得到；

                    var xmlhttp =new XMLHttpRequset（）；

    第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

            xmlhttp.open(method,url,async)建立远程的连接

            method包括get 和post，

            url主要是文件或资源的路径，

            async参数为true(代表异步)或者false（代表同步）,一般是true

            xhttp.send(string);使用post方法发送请求到服务器。

    第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

            使用responseText属性得到服务器响应的字符串数据，它包含对文本请求的响应，如果请求不成功或 尚未发送，则返回null。responseText属性在请求完成之前将会得到请求内容 

            使用responseXML属性得到服务器响应的XML数据。

    第四步，然后需要进行远程监听，通过调用监听事件onreadystatechange函数监听远程服务器的工作 状态，函数中有两个工作状态值：readyState和status

            （1）readyState属性是指XMLHttpRequest对象的状态：

                        0 (未初始化) or (请求还未初始化)

                        1 (正在加载) or (已建立服务器链接)

                        2 (加载成功) or (请求已接受)

                        3 (交互) or (正在处理请求)

                        4 (完成) or (请求已完成并且响应已准备好)

            （2）status属性，服务器返回的状态码，200表示成功响应，404表示页面不存在。

            （3）在onreadystatechange事件中，当readyState==4和status==200的时候服务器响应准备执行完毕。

            （4）执行成功后远程服务器会把ajax数据以json字符串数据传输出来，放到responsetext，这是 一个字符串，而字符串无法直接操作。

            （5）如果要操作需要将字符串转成json对象，可以使用eval和Json.parse

            （6）我们常用的eval，其中Eval函数的作用是将字符串当成命令执行，转出来的对象就可以用遍历 循环方法、结合dom节点遍历到页面中

这就是js操作ajax

3.ajax在jq中的使用

        jquery对ajax操作进行了封装，在jquery中$.ajax()方法属于最底层的方法，第二层是load()、 $.get()/$.post()方法，第三层是$.getScript()和$getJSON()方法。其中$.ajax()方法常用，常用参数为：url，type，data，dataType

        url: 数据地址接口，后台与前台交互的地址就是url。

        dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

            1. 在数据传输的过程中，出于对安全的考虑，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

            2. Ajax受到同源策略的限制，不允许跨域调用其他页面的对象。而在我们工作中来自一个服务器中情况不多，我们需要跨域调用其他页面的对象。我们经常在dataType属性中使用jsonp跨域，跨域后返回callback函数承载json数据。

4.ajax在vue中的使用

        随着技术的更新，像vue react等框架中都封装了ajax

        Vue中有两种操作ajax的方法：

            （1）使用fetch.js 

            （2）axios.js Vue官方推荐的ajax库

            操作：先npm下载，安装后就可以使用ajax了

5.Ajax应用

        App页面的揽加载、瀑布流、页面的数据加载等都是通过ajax实现

6.ajax的优缺点

        优点：

            1. 通过异步模式，提升了用户体验

            2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

            3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

            4、AJAX最大的特点是可以实现动态不刷新（局部刷新）

        缺点：

            1、ajax不支持浏览器back回退按钮，打乱回退的箭头机制。

            2、对搜索引擎的支持比较弱。

            3、破坏了程序的异常机制。

            4.不容易调试

            5.浏览器不兼容

            6.增加web服务器的负载

            7.对流媒体还有移动设备的支持不友好

            8.破坏了程序的异常机制

            9.违背了url和资源定位的初衷

            10.如果用户禁用了js 网站就取不到数据