JQuery--AJAX应用原理（及包含基础知识）

js的简单用法

js的in和of关键字用法

• in：遍历的得到的数据是数组的下标
• of：遍历的的到的数据是数组中的对象

JS模版字符串语法

字符串拼接：定义字符串的方式是：var a = “a” + b + “c”;这种方式适合数据量较少的时候使用
模版字符串：主要的作用就时动态拼接字符串; 定义模板字符串是以：两个反引号的形式如下图：

a += `
<tr align = 'center'>
	<td>${user.id}</td>
	<td>${user.name}</td>
	<td>${user.age}</td>
</tr>
`;

字符串拼接的弊端：

• 如果换行,则需要重新编辑字符串引号
• 如果其中需要动态的拼接参数 则结构复杂
• 使用原生的字符串拼接 没有数据结构,导致阅读混乱

模版字符串的优点：

• 支持串之间的换行
• 使用动态数据时不需要拼接而使用$(对象)的方式即可引用
• 使得数据更加有结构化，更容易阅读

JS变量的基本用法

var关键字：

• 该变量相当于在全局范围内声明了一个变量
• 该变量声明没有作用域的概念(哪哪都能用)
• 弊端: 由于没有作用域的规定,导致变量使用混乱
  
  

let 关键字：

• 该关键字的用法与var一样.但是有作用域的范围.更加的通用
  
  

const关键字：

• 该关键字的用法与var一样.但是该关键字用来标识常量, 该数据不变

什么是Json

概念

JSON是一种轻量级的数据交换格式，它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。JSON采用完全独立于程序语言的文本格式，与编程语言无关。它是由http协议与前后端数据交换演变过来的特殊字符串

对象格式

对象格式：{"id":1,"name":"黑熊精","age":3000,"sex":"男"}

对象(Object)是一个无序的【Key：Value】

对象格式：["张三","李四","不知火舞"]

数组(Array)是值(Value)的有序集合

总结：对象的键值对是无序排放的，但是如果以数组的形式是有序的

Ajax的概念点

Ajax异步调用原理

同步：用户发起请求时,要求第一时间服务器做出响应.在此期间用户不可以做其它操作,只能等待服务器返回数据,网页只刷新1次


异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作。后续如果后端服务器返回数据则通过回调函数通知客户. 网页可局部刷新多次


如何做到异步？
前端浏览器把需要访问的请求交给AJAX引擎代理http请求向后端服务器发送请求，这时候前端浏览器可以去做其他事情；等到后端服务器将响应结果发送给AJAX引擎时，AJAX引擎在去调用前端浏览器的回调函数即可完成异步访问。
(相当于把请求的事情交给别人去做，而自己去做其他事情。当别人拿到数据在回来告诉自己结果)

常见请求5种类请求型(共七种)

请求类型	适用
get	常用与数据的查询功能(无论怎么传参,最后都会以url拼接参数进行访问)
post	常用与新增和数据的提交 (无论如何传参，都会存在body里)
put	常用与 修改 数据
delete	常用与 数据的删除
RestFul	全新的请求方式(类似于get)

ajax请求数据data的两种写法

方式1：以js对象的方式(写法类似于json的格式)
方式2：以字符串拼接的方式参数之间用&分隔(如id=100&name=tom)

而Serializer()序列化函数其实就时将表单信息转化为拼接字符串的方式传参

Ajax返回值类型

当dataType参数类型不指定时：
后台服务器返回的如果是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析.解析之后形成了JS的对象


dataType可用值：

• “xml”：返回xml文档
• ”html”：返回返回纯文本html信息（包含的script标签会在插入dom时执行）
• ”script”：返回纯文本JavaScript代码
• ”json”：返回json数据
• “text”：返回纯文本字符串
• “jsonp”：返回jsonp数据

关于Ajax总结

• Ajax 是局部刷新,异步访问
• Ajax异步的核心在于 Ajax引擎(代理)
• Ajax请求调用时,无论是否成功,都通过回调函数的方式进行. success/error
• Ajax参数传递写法 2种（对象方式/字符串拼接方式)

什么是跨域

跨域规定:

• 如果浏览器的网址与Ajax请求网址必须满足同源策略.则浏览器才能解析Ajax,执行正确的请求
• 跨域只会出现在ajax中
  
  

同源策略:

• 规定要求 请求协议://域名:端口号 3者都满足,则符合同源策略.浏览器可以正确解析
• 反之(只要有一个不满足)不满足同源策略.称之为跨域请求. 则浏览器不能正常解析Ajax请求

CORS(跨域资源共享)

CORS介绍：

• CORS是一个W3C标准，全称是：跨域资源共享
• 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
  
  

使用CORS的条件：

• CORS需要浏览器和服务器同时支持
• 目前所有浏览器都支持该功能，IE浏览器不能低于IE10

所以如果想开启跨域只需要独配置服务端即可实现跨域(CORS)

服务器开启跨域请求的原理：
只需要将允许访问的页面的网址,通过响应头的形式进行设定.则可以实现跨域请求
Access-Control-Allow-Origim: * 表示该服务器支持所有ip通过ajax的方式进行访问