理解AJAX及基本使用

1. AJAX

对 ajax 的认识

• Ajax 是一种创建交互式网页应用的的网页开发技术；Asynchronous JavaScript and XML”的缩写。

Ajax 的优势：

• 通过异步模式，提升了用户体验。
• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
• Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
  ###Ajax 的最大特点：
• 可以实现局部刷新，在不更新整个页面的前提下维护数据，提升用户体验度。

XMLhttprequest对象。

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

例子

jQuery 代码：
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

2. 同步和异步的区别

async参数默认为true即为异步，false为同步

同步：阻塞的

• 张三叫李四吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭

• 浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

• 张三叫李四吃饭，李四在忙，张三说了声自己就去吃饭了，李四忙完后自己去吃

• 浏览器向服务器请求数据，服务器较忙，浏览器可自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

3. 解决跨域问题

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

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

4. 页面编码和被请求的资源编码不一致

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

• 对于post请求不需要进行编码

5. 简述ajax 的过程。

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

6. 异步加载JS。

1. 异步加载的方案： 动态插入 script 标签

2. 通过 ajax 去获取 js 代码，然后通过 eval 执行

3. script 标签上添加 defer 或者 async 属性

4. 创建并插入 iframe，让它异步执行 js

7. jsonp 原理

JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这策略对于JavaScript 代码能够访问的页面内容做了很重要的限制：

• 即 JavaScript 只能访问与包含它的文档在同一域下的内容。

  JavaScript 这个安全策略在进行多 iframe 或多窗口编程、以及 Ajax 编程时显得尤为重要。
  在 baidu.com 下的页面中包含的 JavaScript 代码，不能访问在 google.com 域名下的页面内容；甚至不同的子域名之间的页面也不能通过 JavaScript 代码互相访问。

• 对Ajax的影响在于通过 XMLHttpRequest 实现的Ajax请求，不能向不同的域提交请求.

  例，在 abc.example.com 下的页面，不能向 def.example.com 提交Ajax 请求等。
  然而，当不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。JSONP 跨域 GET 请求是一个常用的解决方案.

• jsonp 的最基本的原理是：动态添加一个< script>标签，使用 script 标签的 src 属性没有跨域的限制的特点实现跨域。

  首先在客户端注册一个 callback, 然后把 callback 的名字传给服务器。此时，服务器先生成 json 数据。
  然后以 javascript 语法的方式，生成一个 function , function 名字就是传递上来的参数 jsonp。
  最后将json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
  客户端浏览器，解析 script 标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。