AJAX入门篇
AJAX入门篇这是我第一次接触Ajax这门技术，未免不感到陌生，故记录我的学习过程，以供未来人参考。 AJAX的概述什么是AJAXAJAX的英文全称是Asynchronous JavaScript And XML，即异步的JavaScript And XML。虽然其使用的是老的技术，但用的是新的思想。接下来，就应该了解一下同步和异步的区别。 XMLHttpRequest我们学习AJAX，实际上就是学习XmlHttpRequest这个对象。下面我们将学习一下该对象的属性和方法。
XMLHttpRequest对象的方法如下图所示：
如何创建XMLHttpRequest对象呢？对于IE浏览器来说，它将XMLHttpRequest对象封装在一个ActiveXObject组件中；而对于Firefox、Opera 8.0+、Safari等浏览器来说，直接就可以创建XMLHttpRequest对象。 function createXMLHttp(){
var xmlHttp;
try{ // Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{ // Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // 低级版本的IE
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // 较高级版本的IE
} catch (e) {
}
}
}
return xmlHttp;
}
AJAX入门AJAX编写的步骤
AJAX入门案例GET方式提交请求首先创建一个动态WEB项目，例如AjaxProject，然后在该项目的WebContent目录下新建一个01_ajax_get目录，并在该目录下新建一个jsp页面——ajax_get.jsp，其内容如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX的GET方式的异步请求</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/01_ajax_get/ajax_get.js"></script>
</head>
<body>
<h1>AJAX的GET方式的异步请求</h1>
<div id="d1" style="width: 300px;height: 300px;border: 1px solid blue;">
</div>
<input id="bt1" type="button" value="AJAX的GET请求" onclick="ajax_get()" />
</body>
</html>
从以上页面内容可知，需要引入一个外部js文件——ajax_get.js。我们在01_ajax_get目录下新建该js文件，先以GET方式提交请求，并且没有请求参数。如此一来，该js文件的内容就为： function ajax_get() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置状态改变的监听，会触发一个函数，该函数通常被称之为回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { // 请求发送成功
if (xhr.status == 200) { // 响应也成功
// 获得响应的数据
var data = xhr.responseText;
// 将向页面输出的数据写入到div中
document.getElementById("d1").innerHTML = data;
}
}
}
// 3.设置请求的路径
// 如果将js代码写到jsp页面中，那么就可以直接使用${pageContext.request.contextPath }这样的EL表达式了，
// 但是这儿是单独写一个js文件，就不能使用${pageContext.request.contextPath }这样的EL表达式了。
// 所以请求路径要写为/AjaxProject/ServletDemo1诸如这样的形式
xhr.open("GET","/AjaxProject/ServletDemo1",true);
// 4.发送请求，没有请求参数就写null
xhr.send(null);
}
function createXMLHttp(){
var xmlHttp;
try{ // Firefox,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{ // Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // 低级版本的IE
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // 较高级版本的IE
} catch (e) {
}
}
}
return xmlHttp;
}
下面我们就需要编写服务器端的代码了。在src目录下新建一个com.itheima.servlet包，并在该包下编写一个Servlet——ServletDemo1.java，其内容如下所示。 /** * Ajax入门的Servlet */
public class ServletDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
response.getWriter().println("Hello Ajax GET...");
}
protected void doPost(HttpServletRequest request,IOException {
doGet(request,response);
}
启动tomcat服务器，然后在浏览器地址栏中输入 function ajax_get() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置状态改变的监听，会触发一个函数，该函数通常被称之为回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { // 请求发送成功
if (xhr.status == 200) { // 响应也成功
// 获得响应的数据
var data = xhr.responseText;
// 将向页面输出的数据写入到div中
document.getElementById("d1").innerHTML = data;
}
}
}
// 3.设置请求的路径
// 如果将js代码写到jsp页面中，那么就可以直接使用${pageContext.request.contextPath }这样的EL表达式了，
// 但是这儿是单独写一个js文件，就不能使用${pageContext.request.contextPath }这样的EL表达式了。
// 所以请求路径要写为/AjaxProject/ServletDemo1诸如这样的形式
xhr.open("GET","/AjaxProject/ServletDemo1?name=aaa&pass=123",true);
// 4.发送请求，没有请求参数就写null
// 注意：以GET方式请求的参数不能写在send方法里面，而应写在请求的路径后面
xhr.send(null);
}
function createXMLHttp(){
var xmlHttp;
try{ // Firefox,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{ // Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // 低级版本的IE
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // 较高级版本的IE
} catch (e) {
}
}
}
return xmlHttp;
}
此时我们还要修改服务器端ServletDemo1类的代码，如下所示。 /** * Ajax入门的Servlet */
public class ServletDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,IOException {
String name = request.getParameter("name");
String pass = request.getParameter("pass");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("Hello Ajax GET... 名称是" + name + " 密码是：" + pass);
}
protected void doPost(HttpServletRequest request,response);
}
重启tomcat服务器，然后在浏览器地址栏中输入 POST方式提交请求首先在AjaxProject项目的WebContent目录下新建一个02_ajax_post目录，并在该目录下新建一个jsp页面——ajax_post.jsp，其内容如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX的POST方式的异步请求</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/02_ajax_post/ajax_post.js"></script>
</head>
<body>
<h1>AJAX的POST方式的异步请求</h1>
<div id="d1" style="width: 300px;height: 300px;border: 1px solid blue;">
</div>
<input id="bt1" type="button" value="AJAX的POST请求" onclick="ajax_post()" />
</body>
</html>
从以上页面内容可知，需要引入一个外部js文件——ajax_post.js。我们在02_ajax_post目录下新建该js文件，先以POST方式提交请求，并且没有请求参数。如此一来，该js文件的内容就为： function ajax_post() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置监听
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("d1").innerHTML = xhr.responseText;
}
}
}
// 3.设置请求路径
xhr.open("POST",true);
// 以POST方式提交的时候，要设置一个请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4.发送请求，没有请求参数就写null
xhr.send(null);
}
function createXMLHttp(){
var xmlHttp;
try{ // Firefox,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{ // Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // 低级版本的IE
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // 较高级版本的IE
} catch (e) {
}
}
}
return xmlHttp;
}
注意：以POST方式提交请求的时候，千万不要忘记设置一个请求头。 /** * Ajax入门的Servlet */
public class ServletDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,IOException {
response.getWriter().println("Hello Ajax POST...");
}
}
重启tomcat服务器，然后在浏览器地址栏中输入 function ajax_post() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置监听
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("d1").innerHTML = xhr.responseText;
}
}
}
// 3.设置请求路径
xhr.open("POST","application/x-www-form-urlencoded");
// 4.发送请求，没有请求参数就写null
// xhr.send(null);
// 注意：以POST方式请求的参数要写在send方法里面
xhr.send("name=aaa&pass=123");
}
function createXMLHttp(){
var xmlHttp;
try{ // Firefox,IOException {
// System.out.println("Hello...");
String name = request.getParameter("name");
String pass = request.getParameter("pass");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("Hello Ajax GET... 名称是" + name + " 密码是：" + pass);
}
protected void doPost(HttpServletRequest request,IOException {
String name = request.getParameter("name");
String pass = request.getParameter("pass");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("Hello Ajax POST... 名称是" + name + " 密码是：" + pass);
}
}
重启tomcat服务器，然后在浏览器地址栏中输入 /** * Ajax入门的Servlet */
public class ServletDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,IOException {
// 解决中文乱码问题
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String pass = request.getParameter("pass");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("Hello Ajax POST... 名称是" + name + " 密码是：" + pass);
}
}
此时在浏览器地址栏中输入 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |