本文共 3120 字，大约阅读时间需要 10 分钟。

ajax总结

1. ajax发展历程(使用原因) :

   传统web，20年前…

   当数据从服务器端获取的时候，需要刷新整个页面
   

   1997年之后，事情得到了改变

   Ajax开始被使用了起来
   意味着数据从服务器端获取的时候,我们不再需要刷新页面,实现异步加载
   

2. 什么是ajax(异步加载数据,局部更新页面)

   Ajax 它本身不是一种技术

   Ajax是利用JavaScript脚本改变web应用与服务器端之间数据交互的一种方式
   通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新.
   传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面.

3. 异步和同步的区别

   同步需要等待返回结果才能继续，异步不必等待

   同步：提交请求 -> 等待服务器处理 -> 处理完毕返回 这个期间客户端浏览器不能干任何事
   异步: 请求通过事件触发 -> 服务器处理（这时浏览器仍然可以作其他事情）-> 处理完毕

4. Ajax可以获取什么格式的数据（注意：你必须要配置集成环境（post），来模拟服务器，使用任何工具都可以获取数据）

   如果不想配置环境(get)，还想获取数据，只要不牵着到后台语言，你就可以用HBuilder这个工具来获取数据，因为HBuilder自带了一个小环境。

   .txt : 纯文本
   .html ：html文件
   .js：JavaScript 文件
   .xml ：xml文件
   .json : json文件

5. ajax创建对象的四个步骤

   状态值(判断请求的) :

   存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4: 请求已完成，且响应已就绪

   状态码(判断响应的) :

   1xx：信息响应类，表示接收到请求并且继续处理
   2xx：处理成功响应类，表示动作被成功接收、理解和接受
   3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
   4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
   5xx：服务端错误，服务器不能正确执行一个正确的请求
   200: "OK“
   304: 文件未改变，页面缓存
   404: 未找到页面
   500：后台的问题

6. get和post的区别

   (1). get是从服务器上获取数据，post是向服务器传送数据。

   (2). get是把参数数据队列加到提交表单的action属性所指的url中，值和表单内各个字段一一对应，在url中可以看到。
   post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
   (3). 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
   get发送数据，在请求头里
   xhr.open(“get”,“one.txt?name=‘lisa’&age=28”,true);
   
   post发送数据，在请求体里
   xhr.send("name=‘lili’ & age=29 ");
   
   (4). get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
   (5). get安全性非常低，post安全性较高。但是执行效率却比post方法好。

   建议：

   1.get方式的安全性较post方式要差些，包含机密信息的话，建议用post数据提交方式
   2、在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式

7. 为什么浏览器不能跨域

   现在很多人特别是前端开发人员，在ajax请求，XMLHttpRequest的过程中会碰到一个问题，那就是跨域请求：当我们javaScript脚本试图跨域访问时，浏览器会告诉你类似于No ‘Access-Control-Allow-Origin’ header is present on the requested resource.的消息。

   可是我有时候又有跨域请求的强烈需求，比如需要去别的网站抓取一些数据（当然现在有很多方法来支持跨域，但这不是本文要讲的内容）。原来这是浏览器的一个策略----同源策略

8. 什么是同源策略（Same Origin Policy）

   所谓同源策略，所谓同源是指域名，协议，端口相同。它是浏览器的一种最核心最基本的安全策略。它对来至不同源的文档或这脚本对当前文档的读写操作做了限制。

9. 什么是跨域

   访问同源的资源是被浏览器允许的，但是如果访问不同源的资源，浏览器默认是不允许的。访问不同源的资源就是跨域

10. 什么是域名

1. 协议(protocol)：本例为“http：”，表示HTTP协议(超文本传输协议)。Internet协议中还包含了很多其他协议，如常用的HTTPS(安全套接字层超文本传输协议),FTP(文件传输协议),SMTP(简单邮件传输协议)等。在协议后面要加上“//”。

   特例：file 资源是本地计算机上的文件。格式file:///，注意后边应是三个斜杠

2. 域名(domain)： ① .com是顶级域名，顶级域名分为国际域名（如.com .net .org等）和国家域名（如.cn） ② cnblogs.com是一级域名，一般网站会把一级域名301/302重定向到二级域名 ③ www.cnblogs.com是二级域名，其中www也是通用的二级域名，还有一些常用二级域名有bbs(论坛)，tieba(贴吧)，mail(邮箱)等 ④ aa.www.cnblogs.com是三级域名，极少用到

3. 端口(port)：可选，域名和端口之间使用“:”作为分隔符。省略时使用各种传输协议有默认端口号,其中http的默认端口为80。端口的范围是1_{65535，其中0}1023多用于绑定一些服务做其默认端口。

4. 目录(path)：可选，从域名后的第一个“/”开始到最后一个“/”为止，也叫路径，其中有些目录最后一个“/”后面是文件名，如果不写则使用默认文件名，在html中一般使用该路径下的index.html。

5. 参数(query)：“？”后面为参数部分，又称搜索部分、查询部分。参数可以允许多个，用“&”分隔。存放了一些数据信息，例如get提交的数据。

6. 锚部分(hash)：可选，“#”后面是锚部分。之前的多应用于锚点定位，在现在的单页应用中作为锚点路由发挥了更大的作用。同时有location.hash可以获取和设置hash,并可以通过onhashchange监听变化等。本例中锚部分是“#overview”,锚点路由一般形式为“…/#/produce/list”。

11. 如何跨域

    跨域的前提条件：所有的跨域请求都必须经过信息提供方允许;如果未经允许即可获取，那是浏览器同源策略出现漏洞

    src跨域(JSONP方式—》get—>同步)

    CORS方式(get,post)
    服务器代理（代理属于后台的技术，所以不展开叙述）

$('#btn').click(function(){
   	var frame = document.createElement('script');	frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';	$('body').append(frame);});

12. 封装ajax

转载地址：https://blog.csdn.net/ZZZ___jh/article/details/109597430 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！