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 的过程。
-
创建XMLHttpRequest对象,也就是创建一个异步调用对象
-
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
-
设置响应HTTP请求状态变化的函数
-
发送HTTP请求
-
获取异步调用返回的数据
-
使用JavaScript和DOM实现局部刷新
6. 异步加载JS。
-
异步加载的方案: 动态插入 script 标签
-
通过 ajax 去获取 js 代码,然后通过 eval 执行
-
script 标签上添加 defer 或者 async 属性
-
创建并插入 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 函数里。