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() : 字符串解析成对象