关于Ajax的知识总结

1、Ajax是什么？如何创建一个Ajax？

Ajax是一种创建网页交互的网页开发技术，全称asynchronous javascript and xml， 主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新。

使用Ajax原声方式发送请求主要通过XMLHttpRequest（标准浏览器）、ActiveXObject（IE浏览器）对象实现异步通信效果

var xhr = null // 创建对象

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest()

} else {

xhr = new ActiveXObject("Microsoft.XMLHTTP")

}

xhr.open("方式", "地址", "标志位") // 初始化请求

xhr.setRequestHeader() // 设置http头部信息

xhr.send() // 发送请求

xhr.onreadystatechange = function () {} // 指定回调函数

 

 

2、同步与异步的区别

同步： 阻塞的

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

浏览器向服务器请求数据，但是服务器比较忙，于是浏览器处于等待状态（页面白屏），等浏览器处理完事件后将数据返回给浏览器，浏览器才显示页面

异步：非阻塞

张三叫李四去吃放，李四忙个不停，张三说了一声自己就去吃放了，李四忙完后才去吃

浏览器向服务器请求数据，服务器在忙，浏览器先干原来的事情比如说显示页面，服务器返回时通知浏览器一声，浏览器再把服务器返回的数据渲染到页面上，局部刷新

 

 

3、如何解决跨域问题

协议、域名、端口相同才同域，否则是跨域

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

 

 

4、页面编码和被请求的资源编码不一致的处理方式

如果是get请求方式，参数如果是传递中文，有些浏览器会出现乱码，所以对于get请求的参数使用encodeURIComponent函数对参数进行编码处理，post请求则不需要进行编码

 

 

5、ajax的过程（ajax交互模型）

a、创建一个异步对象，即new一个XMLHttpRequest对象

b、初始化一个新的HTTP请求，并指定该HTTP请求的方式、url、验证信息

c、设置响应HTTP请求状态变化的函数

d、发送HTTP请求

e、获取异步调用返回的数据

f、使用JS和DOM实现局部刷新

 

 

6、异步加载

a、动态插入script标签

b、通过ajax去获取js代码

c、script标签上添加defer或者async属性

例子：

(function() {

var s = document.createElment("script")

s.type = 'text/javascript'

s.async = true

s.src = 'http://yourdomain.com/script.js'

var x = document.getElementsByTagName('script')[0]

x.parentNode.insertBefore(s, x)

})()

在script标签内，动态创建一个script元素并插入到document中，这就是异步操作js文件

 

 

7、Ajax的优点与缺点？

优点：ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验，按需获取数据，节约带宽资源

缺点：1、不支持浏览器back按钮

2、安全问题，ajax暴露了与服务器交互的细节

3、对搜索引擎支持比较弱

4、破坏了程序的异常机制

 

 

8、ajax请求的时候get和post方法的区别

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url中，如果有中文传参，需要进行编码操作，安全性极低

post请求方式主要用来提交数据，没有数据长度的限制，提交数据内容存在http请求体中，数据不会暴露在url地址中

 

 

 

9、jsonp的原理，以及它为什么不是ajax技术

jsonp不是一种数据格式，json才是数据格式，jsonp是用来解决跨域获取数据的一种解决方案，通过script标签的src属性获取以js形式文件的脚本代码，该脚本内容是一个函数调用，函数的参数就是从服务端返回的数据，为了处理这些返回的数据，要事先在页面定义好回调函数，本质上使用的不是ajax技术