作者：樱桃小丸子儿

链接：https://www.jianshu.com/p/2f7eb1ad7174

Ajax

1、什么是Ajax？

Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。

2、如何使用Ajax从服务器获取数据？

①创建XMLHttpRequest对象，注意兼容IE6的情况

②使用XMLHttpRequest对象的open方法，其中有三个参数：

a.字符串，代表html的请求:GET,POST。

b.要访问的服务器的URL。

c.Boolean值，true表示异步，flase表示同步，一般情况下是异步，默认为true。

③ajax的回调函数。xhr.readyState==4表示请求已经结束，服务器响应完成。

status表示http请求的状态，200表示正常响应；404表示资源找不到；500表示服务器端错误。

④发送ajax请求。如果没有数据，可以不传或者传递null；如果post请求传递数据：首先设置xhr的请求头信息：

xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");

再传递参数：

xhr.send(name=liujianhong&password=123); 

3、解释XMLHttpRequest是什么？

XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。

4、谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。

Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。

一个简单的Ajax操作如下。

var xhr = new XMLHttpRequest();
//在环境中需要做浏览器兼容，这里省略了
xhr.onreadystatechange = function() {
//这里注册当xhr状态发生改变后调用事件
if( xhr.readyState == 4 ) {
//通常在读取状态为4的时候才能获取到部分数据
所以一般状态在4的时候才进行处理
if(status==200) {
 //当正常请求到资源时的处理,
可以调用xhr.responseText或xhr.responseXml获取数据
 }
 else {
 //当请求资源失败时的处理
 }
 }
}
xhr.open( "GET", url);
//设置xhr的请求方式和url,这里使用的是GET方式，
 //如果有参数，则连接在url后面
 /*
 如果是POST请求，还当设置请求的Content-Type
 数据使用send作为参数发送
 */
xhr.send();

5、谈谈你对JSON的理解。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

所以它往往在AJAX中替代XML，交换数据。

6、你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？

①有。

②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。

③当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。

7、你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？

没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。

8、你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？

①遇到过。

②一般我首先统一页面和服务器编码，对请求和响应的Content-Type设置正确编码；对请求参数进行编码处理。

9、解释jsonp的原理，以及为什么不是真正的ajax

①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。

②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据，而JSONP的核心则是动态添加<script>标签来调用服务器提供的js文件。

③Ajax与JSONP的区别也不在于是否跨域，Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据。具体请看一下参考：

【原创】说说json和jsonp,也许你会豁然开朗，含jQuery用例

深入浅出jsonp–解决ajax跨域问题

浏览器的同源策略-MDN

10、ajax 有那些优缺点?如何解决跨域问题?

优点：

①通过异步模式，提升了用户体验.

②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.

③Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

④Ajax可以实现动态不刷新（局部刷新）

缺点：

①安全问题 AJAX暴露了与服务器交互的细节。

②对搜索引擎的支持比较弱。

③不容易调试。

跨域问题：

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。

11、JavaScript原型，原型链 ? 有什么特点？

①原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。

②原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。