Ajax及其跨域基本知识

Ajax

1. 如何解决跨域

同域的概念：

• 协议
• 域名
• 端口
  这三个都相同才叫同域，否则都是跨域

主流解决方案
出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容。所以可以通过动态创建js标签，使用标签内的 src 属性访问js文件的形式获取 js 脚本，并且要求这个 js 脚本的内容是函数调用，该函数调用的是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据。

2. 页面编码和被请求的资源编码不一致时的处理

对于ajax 请求传参的参数

• get请求
  参数中如果传递中文，在有些浏览器中会乱码，不同浏览器对参数编码的处理方式不同
  编码处理：encodeURIComponent 函数对get 请求的参数进行编码处理
  后台开发语言都有相应的api
• post 请求
  对于post请求不需要编码

---

get请求和post请求的区别

• get
  一般用来查询操作，url 地址有长度限制，请求的参数都是暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低
• post
  请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http 请求体中，数据不会暴露在url地址中

3. 简述ajax的过程

1. 创建一个异步调用对象：XMLHttpRequest对象
2. 创建一个新的http请求，并指定该http请求的方法，URL及验证信息
3. 设置响应的http请求状态变化的函数
4. 发送http请求
5. 获取异步调用返回的数据
6. 使用js和dom实现局部刷新

4. 异步加载

1. 动态插入js标签
2. 通过ajax获取js代码，通过eval执行
3. script标签上添加defer 或者async属性
4. 创建并插入iframe，让他异步执行js

---

同步和异步的区别

• 同步：阻塞的
  浏览器向服务器请求数据，但是现在服务器正处于忙碌状态，则浏览器就一直等着（处于白屏状态），直到服务器返回数据，浏览器才能显示页面。
• 异步：非阻塞的
  浏览器向服务器请求数据，但是现在服务器正处于忙碌状态，则浏览器可以自己干自己原来的事情（显示页面），当服务器返回数据的时候通知浏览器，浏览器再把返回的数据渲染到页面，进行局部更新。