[JavaScript知识库]ajax技术和跨域问题

今天我们来聊聊关于前端圈子的里的一个小技术，ajax技术和跨域问题。

ajax全称：Asynchronous Javascript And XML（异步JavaScript和XML）。

百度百科说的可能不是很好理解，举个例子，来描述这个ajax究竟在我们日常开发中起到了什么作用。

在平时浏览一些网页时，我们在对页面进行一些操作，比如点击、输入数据等等，在不刷新页面的情况下，网页也会更新一些数据。像这样的场景，一般都是用到了ajax技术。

不刷新页面：指的就是 不点击浏览器左上角的刷新按钮，也不按F5的情况下。

说得更直白一点就是，ajax会悄悄地向后台发送http请求，然后浏览器拿到服务器返回的响应，并显示在屏幕上。ajax技术就是这样。

所谓的异步，也就同时的意思，只不过在这里，它是自己悄悄地发送的http请求。

那知道了它是用来干什么的了，现在来看看它是怎么使用的。

前提：ajax，是在前端圈子中一个很知名的第三方库JQuery中，所以需要引入依赖。

引入依赖方法：百度搜索“JQuery CDN”，或者打开这个网址，里面找一个链接，拷贝到HTML文件中即可。

比如这样：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ut8YNdLk-1666572840163)(image/image-20220421150012223.png)]

1. 用法一

   // get方法，以下的第二个参数，可以不写
   $.get("URL", {json数据格式的参数}, function(data) {
       // 这里是回调函数，data是服务器返回的响应数据
       // 常常将响应数据，使用JS代码写到html页面中
   });
   
   //示例
   $.get("www.baidu.com", {'code': 3306}, function(data) {
       // 处理响应数据data
       console.log(data); 
   });
   

2. 用法二

   // post方法，第二个参数也是可以不写的
   $.post("URL", {json数据格式的参数}, function(data) {
      // data也是服务器响应的数据
       // 回调函数
   });
   

3. 用法三

   $.ajax({
       // json格式
   });
   
   //示例
   $.ajax({
       url: "www.baidu.com",
       method: "post", // 请求方法，比如get、post等
       dataType: "json", // 设置服务器响应的数据格式，比如text、json等
       success: function(data, statue) {
           // 当调用成功后，会调用这个函数，也就是回调函数
           // data是响应数据，statue是响应状态
       },
       error: function(data, statue) {
           // 当这个请求调用失败后，会调用这个函数，比如服务器
           // 返回4xx系列的响应码，就会调用这个函数
           
       }
   });
   

当然，上述第三个用法，里面还有很多的字段可以使用，我们这里就列举了，可以查查文档。

简单介绍了ajax技术的作用以及用法，再说一说ajax技术办不到的一些情况。

那就是ajax技术，不能请求除当前网站以外的数据。说的简单一点，产生ajax请求的是在A服务器上，而ajax请求的对象却在B服务器上，这两个服务器根本是没关系的。具体的原因是同源策略，限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在恶意文件的重要安全机制。

跨域问题：在当前页面里面，去请求域名或协议或端口号不同的其他网页数据，称之为跨域。

那如何解决跨域问题？

我们可以使用jsonp进行跨域访问，原理如下：

1. 利用script标签的src属性，这个标签本身就是可以进行跨域访问的；
2. 将函数的实现细节设置在发送数据的一端，在接收数据的一端声明一个相同函数名的函数。

标签的src属性，这个标签本身就是可以进行跨域访问的；
2. 将函数的实现细节设置在发送数据的一端，在接收数据的一端声明一个相同函数名的函数。