【转载】AJAX常见知识点
1什么是ajax？ajax作用是什么？
AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.
2、为什么要用ajax：
Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
3.AJAX最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
4、请介绍一下XMLHttprequest对象。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
5、AJAX技术体系的组成部分有哪些。
HTML，css，dom，xml，xmlHttpRequest，javascript
6:原生js ajax请求有几个步骤？分别是什么
//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求
ajax.send(null);
//接受服务器响应数据
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
}
};
7:json字符串转换集json对象、json对象转换json字符串
//字符串转对象
JSON.parse(json)
eval('(' + jsonstr + ')')
// 对象转字符串
JSON.stringify(json)
Eval() json.parse()区别？？？？
第一种方式：eval（）；
var data='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’；
eval（’（“+data+”）’）;
第二种方式：JSON.parse（）；
var data='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’；
JSON.parse（data）；
区别：eval方法不会去检查给的字符串时候符合json的格式~同时如果给的字符串中存在js代码eval也会一并执行~比如:
var data='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"alert(11)"},{"name":"王五","age":"11"}]}’；
此时执行eval方法后会先弹出一个提示框输出11的字符串;
这时候使用JSON.parse()就会报错,显示错误信息为当前字符串不符合json格式;即JSON.parse()方法会检查需要转换的字符串是否符合json格式.
相比而言eval方法是很不安全，特别是当涉及到第三方时我们需要确保传给eval的参数是我们可以控制的，不然里面插入比如window.location~指向一个恶意的连接
总的来说，还是推荐使用JSON.parse来实现json格式字符串的解析。
8.什么是JSON？
JSON是一种轻量级的数据交换格式。
9:ajax几种请求方式？他们的优缺点？
常用的post,get,delete put
###代码上的区别
1:get通过url传递参数
2:post设置请求头 规定请求数据类型
###使用上的区别
1:post比get安全
(因为post参数在请求体中。get参数在url上面)
2:get传输速度比post快 根据传参决定的。
(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
4:get获取数据 post上传数据
(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)10.什么情况造成跨域？
同源策略限制 不同源会造成跨域。以下任意一种情况不同，都是不同源。
同源：协议 域名 端口号全部相同 只要有一个不相同就是非同源策略
11.跨域解决方案有哪些？
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：
1. 去创建一个script标签
3. 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
4. 通过定义函数名去接收后台返回数据
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}
2. CORS：跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问
3.反向代理
4.window+iframe
14.http常见状态码有哪些？
一: 2开头状态码
2xx (成功)表示成功处理了请求的状态代码
200 (成功) 服务器已成功处理了请求。通常。
二: 3开头状态码
3xx (重定向) 表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。
304 (未修改) 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
三: 4开头状态码
4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理
1:400 (错误请求) 服务器不理解请求的语法。
2:403 (禁止) 服务器拒绝请求。
3:404 (未找到) 服务器找不到请求的网页。
四: 5开头状态码
5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错
500 (服务器内部错误) 服务器遇到错误，无法完成请求
15 介绍一下XMLHttpRequest对象的常用方法和属性
open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求 方式可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法，发送具体请求
abort()方法，停止当前请求
readyState属性 请求的状态 有5个可取值0=未初始化 ，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性 服务器的响应，表示为一个串
reponseXML 属性 服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found
16什么是XML
XML是扩展标记语言，能够用一系列简单的标记描述数据
17.AJAX都有哪些优点和缺点？
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
最后编辑于 2021.05-19