一、初始Ajax
1、什么是Ajax?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
2、原生Ajax学习
- 传统请求的缺点:所有请求到达后台,最终都要进行转发或是重定向,页面肯定是整个页面的刷新,如果我们要得到的内容,仅仅只是作用与局部,那么使用局部刷新才是最好的选择。
- AJAX技术的应用(ajax不是新语言,而是基于js语言的技术):做原生ajax的操作,都是直接从文档中copy,里面的组件一定要知道每一个部分的作用。
创建ajax技术的核心对象xmlhttp
下图中显示如何创建
使用核心对象如下图所示
3.XMLHttpRequest对象的创建
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
4.XMLHttpRequest对象的重要属性
readyState:返回当前请求的状态
onreadystatechange:指定当readState状态改变时使用的操作,一般用于指定具体的回调函数
responseText:接收以普通文本返回的数据
status:返回当前请求的http状态码
5.readyState的五种取值
6.open方法和send方法
7.使用AJAX发送请求的步骤:
- 根据浏览器创建异步引擎对象
- 设置异步引擎对象的属性,包括设置回调方法、设置请求路径以及请求方式、设置请求的头文件信息
- 调用异步引擎对象的send方法请求,并传递请求的参数
- 编写服务器端代码为Ajax做出响应
- 编写回调方法根据服务器的响应数据对页面进行局部内容改变
8.AJAX的get请求实例1(不带参数):
9.传递参数的其他作用:解决get缓存问题
get请求缓存:是指当使用get方式发送ajax时,如果请求信息相同那么浏览器不会再出向服务器发送请求,导致访问服务器失败。
解决方案:可以通过随机数或时间戳添加请求的后面作为参数,那么这样发送请求时每次请求信息都将不同可以避免缓存问题。关键代码:
随机数方式:
时间戳方式:
10.设置异步或同步请求:
关键代码:
修改为true再试一次
11.AJAX的post请求实例1(无参数):
与get请求一样的方式,一样的结果
关键代码:
- AJAX的post请求实例1(有参数):
//3.打开一个连接:
xhr.open(“POST”,”myServlet1.do”,true);
// 4.发送请求
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“str1=aaa&str2=bbb1”);
13.AJAX对中文乱码的处理
Get提交关键代码:
Post提交关键代码:
总结:尽可能使用POST请求避免乱码问题,并且后台Java类中使用request.setCharacterEncoding(“UTF-8”),设置请求对象编码格式
- AJAX的post请求实例1(有参数):