AJAX概念
-
AJAX 是什么？
Asynchronous JavaScript and XML（异步JavaScript和XML)
-
作用
- 不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- 节省用户操作，时间，提高用户体验，减少数据请求传输获取数据
-
过程：
初始化 – >发送请求 –> 服务器收到请求 –> 服务器处理 –> 返回结果
表单
- 表单form
- action 提交到哪里
- method 提交方式
- Get方式
- Get通过url地址传输
- 有数据量限制，每个浏览器都不同
- 不安全
- Post方式
- Post通过浏览器内部传输
- 数据量理论上无限
- 相对比较安全
- enctype : 提交的数据格式，默认application/x-www-form-urlencoded
- 提交方式必须与后台的接收方式一致。
异常处理
try {}catch{}用于异常处理，当try语句里的内容执行出现
错误的时候，就会执行catch里的语句。 catch里能使用
<figure class="highlight plain" style="background: rgb(246, 248, 250); margin: 8px -15px; padding: 15px; border-style: solid; border-color: rgb(221, 221, 221); border-width: 1px 0px; overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
|
<pre style="margin: 0px; padding: 0px 20px 0px 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 0.85em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(102, 102, 102); line-height: 22.4px; text-align: right;">
1
2
3
4
5
</pre>
|
<pre style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 1em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px;">
//err.message捕获出错的原因。
try{//此处是可能产生例外的语句
}catch(err){
//此处是负责例外的处理白语句
}
</pre>
|
</figure>
finally里是始终会执行的语句
<figure class="highlight plain" style="background: rgb(246, 248, 250); margin: 8px -15px; padding: 15px; border-style: solid; border-color: rgb(221, 221, 221); border-width: 1px 0px; overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
|
<pre style="margin: 0px; padding: 0px 20px 0px 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 0.85em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(102, 102, 102); line-height: 22.4px; text-align: right;">
1
2
3
4
5
6
7
</pre>
|
<pre style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 1em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px;">
Try{
//此处是可能产生例外的语句
} catch (err) {
//此处是负责例外处理的语句
}finally{
//此处是出口语句，当try，catch的
}
</pre>
|
</figure>
AJAX的方法
- Open方法 open(method,url,async)
- 三个参数的含义
1、提交方式 Form-method
2、提交地址 Form-action
3、异步（同步）
- 三个参数的含义
- Send方法
发送数据请求，相当于Form的submit - AJAX请求状态监控
- onreadystatechange事件
- readyState属性：请求状态
0 （初始化）还没有调用open()方法
1（载入）已调用send()方法，正在发送请求
2（载入完成）send()方法完成，已收到全部响应内容
3（解析）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用了 - status属性：服务器(请求资源)的状态
AJAX返回数据的处理
- 返回的内容
- responseText：返回以文本形式存放的内容
- responseXML：返回XML形式的内容
- 返回数据的处理
- 数据类型：XML、 HTML、 JSON
- Eval解析JSON的时候需要注意的地方
- JSON.parse() : 字符串解析成对象
