Ajax

1.   课程介绍

• 1.  传统web交互流程;（掌握）
• 2.  Ajax项目交互流程;（掌握）
• 3.  第一个Ajax程序：获取服务器的时间;（掌握）
• 4. Ajax定义，方法，属性;（掌握）
• 5. 注册时候验证用户是否重复；Ajax登录;（掌握）
• 6. Ajax二级联动;（掌握）

1. 浏览器<-->请求/响应<-->服务器

2.1.  传统交互方式：

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，那么就必须让浏览器重新发送一次请求到服务器，服务器接收请求并处理完毕后会把一个完整的网页返回给客户端（浏览器），浏览器把网页直接显示给用户；

2.2.  传统交互方式问题：

每次操作都必须返回整个页面，带宽，响应速度都有影响的

1. AJAX<-->请求/响应<-->服务器

3.1.  AJAX交互方式：

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest（及Ajax对象）对象发送请求到服务器，服务器接收请求并处理完毕后只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容，程序员需要手动(javascript)的把内容更新到页面中；

3.2.  AJAX交互方式好处：

只是部分数据更新，就成功和服务器进行了交互，可以提高用户的使用体验。

3.3.  那些场景需要使用ajax

需要局部刷新的页面

1. 浏览器地图搜索
2. 自动提示

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

1. 用户名重复检查：

用户注册时，检查用户名是否存在，及时给用户反馈；

1. 邮箱提示：

WEB版邮箱系统，当有新邮件到底服务器，浏览器不用刷新页面也知道是否有新邮件；

1. 无刷新分页：

显示数据列表，用户点击下一页数据，整个页面不会刷新，只把下一页的数据更新到页面中；

1. 购物车：

用户点击添加到购物车后，能继续进行其他操作，而购物车的数据存储服务器端；

1. 用户登录：

用户登录的数据通过AJAX传输到后台，如果登录失败直接在当前登录页面提示用户，而不用刷新整个页面；

如果应用中的页面需要局部刷新并且需要与服务器交互，那么就可以使用AJAX；

1. 视频网站
2. 股票网站(轮询)

秘诀：浏览器网站的时候，留心观察很多页面未刷新，但是页面中的内容被更改了，这些都是AJAX使用场景；

1. AJAX相关概念

4.1.  新瓶ajax装旧水(js,xml(json))

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX是一种用于创建快速动态网页的技术。

 

4.2.  AJAX特点：

通过AJAX与服务器进行数据交换，AJAX可以使网页实现局部更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

4.3.  AJAX核心：

Ajax 的核心是 JavaScript 对象 XMLHttpRequest。简而言之，XMLHttpRequest 使您可以使用 JavaScript 向服务器进行请求并处理响应。

4.4.  同步交互和异步交互

举个例子：普通B/S模式(同步)       AJAX技术(异步)

 

*  同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

*  异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

 

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

    

易懂的理解:

异步传输:   你传输吧，我去做我的事了，传输完了告诉我一声  

同步传输:   你现在传输，我要亲眼看你传输完成，才去做别的事

1. 通过ajax显示服务器的时间

5.1.  创建web 动态工程

5.2.  搭建初步的js代码

 

5.3.  创建 XMLHttpRequest 对象

Javascript是严格区分大小写的

有浏览器兼容的问题

5.3.1.   所有现代浏览器(自动更新)

（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

var ajax=new XMLHttpRequest();

5.3.2.   老版本的 Internet Explorer （IE6）使用 ActiveX 对象：

var ajax=new ActiveXObject("Microsoft.XMLHTTP");

 

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

5.4.  创建的方式1

var xmlhttp;

if (window.XMLHttpRequest)//判断当前浏览器是否有XMLHttpRequest{

// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

}

else

 {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

 }

5.5.  创建方式2

 

1. Ajax方法

6.1.  open(method,url,async)

创建请求，并且规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：请求路径,url地址

async：true（异步），一定要选择true

或 false（同步）

 

6.2.  send(string)    

将请求发送到服务器。

string：仅用于 POST 请求，字符串必须服务器URL编码格式（列如：param1=value1&param2=value2）;

6.3.  setRequestHeader(header,value) ,添加额外的请求头信息，post提交必须使用

向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

注意：该方法必须在open与send之间调用；

        原因：

                1、open之后，open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；

 

 

                2、send之前，send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；

1. Ajax属性

7.1.  readyState 

存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。

0: 请求未初始化         未创建

1: 服务器连接已建立     open()方法

2: 请求已接收          send()方法

3: 请求处理中           服务器处理中

4: 请求已完成，且响应已就绪   响应完毕

 

7.2.  onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

 

7.3.  status     HTTP响应状态

200: "OK"  请求成功

404: "NOT FOUND" 没有找到对应资源

500:"Server Error" 服务器端错误

 

7.4.  响应数据相关属性

responseText 获得字符串形式的响应数据。

responseXML   获得 XML 形式的响应数据。

 

1. Ajax正确写代码流程

由于我们采用的是异步请求,异步请求发送send()后,不会等待响应结果的返回,而直接继续执行下面的代码;当执行ajax.responseText的时候有可能服务器还没有响应结果;

所有记住Ajax正确写代码流程

 

1. Ajax Get提交IE缓存问题

在url地址添加随机数或者时间戳

ajax.open("GET","/hello_hello?"+new Date().getTime(),true);

1. Ajax检查用户名是否重复

10.1.         页面

 

10.2.         js 

 

 

10.3.         Action

response.setContentType("text/html; charset=UTF-8");

 

1. Ajax post登录

11.1.         传统表单默认的提交属性

Content-Type      application/x-www-form-urlencoded

 

enctype="application/x-www-form-urlencoded"

浏览器访问的时候，这个属性默认不写,由浏览器自动添加

11.2.         Ajax post必须额外提交的请求头,写在send方法之前

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

11.3.         页面

 

11.4.         Js

 

11.5.         Action

 

 

1. Json格式

12.1.         JSON（JavaScript Object  Notation）

一种简单的数据格式，比xml更轻巧

 

如果是多个对象,数组[{},{}]

如果是单个对象,{}

数据类型:字符串,数值,布尔值,null,对象,数组

 

12.2.         使用xml表示用户,id属性,name属性

<user id=”1”>

  <name>xxx</name>

</user>

<user id=”2”>

  <name>yyy</name>

</user>

 

12.3.         使用json表示用户,id属性,name属性

[{"id":1,"name":"xxx"},{"id":2,"name":"yyy"}]

标准json字符串的格式：

key一定要添加双引号""，单引号’’不行的，如上面的id，name

如果value是布尔值，数值，可以不加""

如果value是字符串，一定要加""

结束的位置不能,前面属性分割都是,

12.4.         Js

 

 

 

1. 二级联动json版

有2个select下拉列表,前一个改变,后一个随之改变

准备二级联动的模拟数据

13.1.         模型

 

13.2.         模拟数据

 

 

13.3.         测试

 

 

 

13.4.         通过工具把List变成json字符串

13.4.1.        添加jar文件

 

JSONSerializer.toJSON(parents)

13.5.         页面

 

13.6.         Js

 

 

 

13.7.         Action

 

 

 

 

 

 

 

 

1. 课程总结

14.1.         重点

Ajax Post登录

Json字符串标准格式

二级联动

14.2.         难点

Js报错怎样处理？打印异常，清空缓存

哪一行报错？使用alert，console.debug()打印

1. 常见异常

 

1. 课后练习

 

1. 面试题
2. 那些场景需要使用ajax
3. 同步交互和异步交互
4. 如果是html页面可以显示动态内容?

如果使用ajax是可以的

 

1. 扩展知识或课外阅读推荐

18.1.         扩展知识

18.2.         课外阅读