Javaweb-AJAX快速入门及案例实战

1. AJAX概述

1. AJAX介绍
   

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

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

AJAX = 异步 JavaScript​和XML​（标准通用标记语言的子集）。

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

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

1. AJAX优点
   

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好

1. AJAX工作原理
   

1. AJAX应用

1. AJAX快速入门
   

创建一个demo1.html

如何发送一个ajax请求?

1. 第一步:获取一个XMLHttpRequest对象
   

1. 第二步:设置一个回调函数
   

回调函数它的作用就是用于处理服务器响应的数据

通过XMLHttpRequest对象的onreadystatechange设置回调函数

1. 第三步设置请求方式GET/POST及请求的URL等
   

通过XMLHttpRequest对象的open方法

1. 第四步真正向服务器发送请求
   

通过XMLHttpRequest对象的send方法

1. 第五步在回调函数中获取服务器响应的数据
   

通过XMLHttpRequest对象的responseText

1. XMLHttpRequest对象详解

1. 获取XMLHttpRequest 对象
   

对于大部分浏览器可以直接通过 new XMLHttpRequest();

对于IE5 IE6 new ActiveXObject("Microsoft.XMLHTTP")

1. XMLHttpRequest常用属性
   
   1. 
      
2. onreadystatechange 它是用于绑定回调函数，当服务器响应数据回来后，我们可以在指定的回调函数中进行数据处理。
3. readyState 它描述的http请求的状态
   1. 
      

1. 1. 
      
2. status 它描述的http状态码 200 404 405 500…  
   
3. 获取服务器响应数据 responesText或responseXML来获取

1. XMLHttpRequest常用方法
   

3. open它是用于设置请求方式，url及是否异步 参数1：HTTP 请求方式 POST/GET。
   参数2:url路径
   参数3:true/false 代表是否异步
    
   
4. send它是真正向服务器发送请求 如果请求方式是get，那么我们使用send(null) 原因:get请求方式是没有http请求体
   只有post请求方式时，才有请求体,所以send的参数只是在post请求时使用例如
   Xmlhttp.send("username=xxx&password=xxx");
    
   
5. setRequestHeader 注意：如果请求方式是POST,那么我们在使用时，必须设置一个请求头，就需要使用setRequestHeader方法来完成
   
   1. 
      

1. AJAX案例

1. 案例1-验证用户名是否可以使用

1. 第一步:创建一个页面demo2.html
   

1. 第二步:完成浏览器向服务器发送ajax请求操作
   
   1. 
      
2. 得到文本框中录入信息
    
   
3. 使用ajax来完成向服务器发送请求操作

1. 第三步:完成服务器端操作
   

4. 
   

1. 第四步:在浏览器端展示数据
   
2. 在浏览器展示

1. 修改服务器端响应数据

1. 案例2-省市二级联动

1. 第一步:创建demo3.html页面
   

1. 第二步:在服务器端创建一个工具类CityUtil它可以获取省份与城市信息
   

创建ProvinceServlet

创建CityServlet

1. 第三步:向服务器发送请求获取省份信息填充到省份下拉框
   
2. 在demo3.html页面上向服务器发送ajax请求

1. 1. 
      
2. 服务器响应省份信息
   
3. 在浏览器端处理服务器响应的数据，显示在省份下拉框
   1. 
      

1. 第四步:选择省份信息，向服务器发送请求获取城市信息填充到城市下拉框
   

1.获取省份名称

2.向服务器发送请求，将省份名称做为参数传递到服务器，服务器根据省份名称查询对应的城市信息

3.在浏览器端处理数据填充到城市下拉框中

注意:在向城市下拉框中添加信息前要先进行一次清空操作