jQuery中的ajax

jquery 库中已经封装了ajax请求的方法。

jquery.ajax([settings])。发请求并且能得知成功还是失败。
type:类型，“POST"或者"GET”，默认是"GET"。
url:发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。
success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $("button").on("click",function(){
            jQuery.ajax({
                type : "get",//默认为get请求
                url : "http://127.0.0.1:6562/0930/01/01.php",
                data : {
                    uname : $("#username").val(),
                    upwd : $("#userpwd").val()
                },
                // dataType : "text",
                success : function(data){
                    console.log(data)
                },
                error :function(err){
                    console.log(err)//返回为错误对象，其中会包含错误信息
                }
            })
        })
    </script>

跨域

1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
“同源”：协议相同、域名相同、端口相同。
目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
限制：随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制：
(1)Cookie、LocalStorage 和 IndexDB 无法读取。
(2)DOM 无法获得。
(3)AJAX 请求不能发送。

解决跨域的三种方法
①设置服务端响应头

​ ②代理

​ ③JSONP

而我们前端所要掌握的就是第三种JSONP。

JSONP跨域（get）

JSONP是服务器与客户端跨源通信的最常用方法。最大特点就是简单适用，老式浏览器全部支持，对服务器改造非常小。

​ 本质：实际上利用了script标签引入js文件，并解析执行的原理。

​ 使用方法：

①、在html中插入script标签，并利用script标签发起跨源请求

②、在服务器对应php文件中通过拼接字符串，模拟函数调用。并将要返回数据通过回调函数参数返回。

③、在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。

优点：

​ (1)由于使用script脚本作为请求，因此实际上请求和传统的引入js脚本没有任何区别。
​ (2)而在返回的数据中我们也尽量模拟出了js调用函数的语法，因此只要在页面中声明了回调函数就会自动被调用。
​ (3)再者作为参数的【服务器端】的JSON数据，在js中是被直接识别为对象，因此在回调函数中也避免了使用JSON.parse的步骤。

面试题

1.为什么JSONP不是真正的AJAX？
JSONP是通过Script中的SRC属性携带参数传递数据，跟XMLHttpRequest对象没有任何关系。
实质不同：
​ ajax的核心是通过xmlHttpRequest获取非本页内容
​ jsonp的核心是动态添加script标签调用服务器提供的js脚本
​ jsonp只支持get请求，ajax支持get和post请求。

2.AJAX优缺点
优点：
1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

3.跨域解决方案有哪些？
jsonp 只能解决get跨域
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：
去创建一个script标签
script的src属性设置接口地址
接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
通过定义函数名去接收后台返回数据

4.http常见状态码有哪些？
一: 2开头状态码
2xx (成功)表示成功处理了请求的状态代码
200 (成功) 服务器已成功处理了请求。 通常。
二: 3开头状态码
3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
三: 4开头状态码
4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理
1:400 (错误请求) 服务器不理解请求的语法。
2:403 (禁止) 服务器拒绝请求。
3:404 (未找到) 服务器找不到请求的网页。
四: 5开头状态码
5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错
500 (服务器内部错误) 服务器遇到错误，无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。
504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

5、请介绍一下XMLHttpRequest对象？

Ajax的核心是javaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。见而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XmlHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部刷新。