AJAX入门篇

原文

AJAX入门篇

这是我第一次接触Ajax这门技术，未免不感到陌生，故记录我的学习过程，以供未来人参考。
其实虽然我之前是没有接触过这门技术，但还是可以看到这样的情况的，例如，在很多网站上实现注册功能的时候，需要输入用户名，当光标离开文本框的时候，会给我们这样一个提示：显示用户名已经存在或者用户名可以使用！那么这时就需要使用到Ajax这门技术了，现在让我们走进Ajax的大门，跟着我的步伐，前进吧！

AJAX的概述

什么是AJAX

AJAX的英文全称是Asynchronous JavaScript And XML，即异步的JavaScript And XML。虽然其使用的是老的技术，但用的是新的思想。接下来，就应该了解一下同步和异步的区别。
我们先来看同步，一图以蔽之。

当用户点击链接或者提交按钮，页面才会跳转，这时整个页面都会刷新。
接着我们再来看异步：

当用户点击链接或者提交按钮，只会让页面的局部进行刷新。这样说来，那么AJAX的功能就是用来完成页面的局部刷新，而不中断用户的体验。此处，我也多说一嘴——早期的时候，JS技术根本不受重视，后台开发人员经常将JS当成一种玩具式语言，但JS中有一个非常重要的XMLHttpRequest对象，其可以向服务器异步发送请求。在传统的B/S结构的软件中，所有实现功能都需要在服务器端编写代码(称之为胖服务器，即服务器端特别臃肿)。现在有了AJAX以后，可以将部分代码写到客户端浏览器(RIA——Rich Internet Application，富浏览器端应用)中。
AJAX既然称之为异步的JavaScript And XML，那么XML代表什么呢？AJAX是使用XML做为数据传递的格式的，但实际上数据格式可以由JSON代替，进一步减少了数据量。

XMLHttpRequest

我们学习AJAX，实际上就是学习XmlHttpRequest这个对象。下面我们将学习一下该对象的属性和方法。
XMLHttpRequest对象的属性如下图所示：

对于以上属性，我还是稍微做一下解释：

  • readyState：XMLHttpRequest对象的状态。共有以下几种状态，如下图所示。
  • onreadystatechange：当XMLHttpRequest对象的状态改变时会触发的一个函数。
  • status：获得响应的状态码，例如200、404等等。
  • responseText：获得(异步加载后)响应的文本数据。
  • responseXML：获得(异步加载后)响应的XML数据。

XMLHttpRequest对象的方法如下图所示：

对于以上方法，我也稍微做一下解释：

  • open(请求方式,请求路径,是否异步)：异步去向服务器发送请求。
  • send(请求参数)：发送请求到http服务器并接收回应。
  • setRequestHeader(头信息,头的值)：单独指定请求的某个http头，可用来处理POST请求方式的中文乱码问题。

如何创建XMLHttpRequest对象呢？

对于IE浏览器来说，它将XMLHttpRequest对象封装在一个ActiveXObject组件中；而对于Firefox、Opera 8.0+、Safari等浏览器来说，直接就可以创建XMLHttpRequest对象。
这儿直接给出创建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编写的步骤

  1. 获得XmlHttpRequest对象
  2. 设置XmlHttpRequest对象状态改变时来触发一个函数
  3. 设置向后台提交的请求路径和请求方式
  4. 发送请求

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服务器，然后在浏览器地址栏中输入http://localhost:8080/AjaxProject/01_ajax_get/ajax_get.jsp进行访问，点击AJAX的GET请求的按钮，就能看到如下所示界面。

下面再以GET方式提交请求，并且有请求参数，此时ajax_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?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服务器，然后在浏览器地址栏中输入http://localhost:8080/AjaxProject/01_ajax_get/ajax_get.jsp进行访问，点击AJAX的GET请求的按钮，就能看到如下所示界面。

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方式提交请求的时候，千万不要忘记设置一个请求头。
下面我们还要修改服务器端ServletDemo1类的代码，如下所示。

/** * 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服务器，然后在浏览器地址栏中输入http://localhost:8080/AjaxProject/02_ajax_post/ajax_post.jsp进行访问，点击AJAX的POST请求的按钮，就能看到如下所示界面。

接着再以POST方式提交请求，并且有请求参数，此时ajax_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","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服务器，然后在浏览器地址栏中输入http://localhost:8080/AjaxProject/02_ajax_post/ajax_post.jsp进行访问，点击AJAX的POST请求的按钮，就能看到如下所示界面。

如若请求参数中有中文，即xhr.send("name=张三&pass=123");，那么此时在浏览器地址栏中输入http://localhost:8080/AjaxProject/02_ajax_post/ajax_post.jsp进行访问，然后点击AJAX的POST请求的按钮，就能看到中文乱码问题了，如下所示界面。

为了解决中文乱码问题，我们需要修改服务器端ServletDemo1类的代码，如下所示。

/** * 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);
    }

}

此时在浏览器地址栏中输入http://localhost:8080/AjaxProject/02_ajax_post/ajax_post.jsp进行访问，然后点击AJAX的POST请求的按钮，发现中文乱码问题被解决了，如下所示界面。

AJAX入门篇的更多相关文章

  1. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  2. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  3. HTML文本属性&amp;颜色控制属性的实现

    这篇文章主要介绍了HTML文本属性&颜色控制属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  4. 简洁自适应404页面HTML好看的404源码

    这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  5. HTML5适合的情人节礼物有纪念日期功能

    这篇文章主要介绍了HTML5适合的情人节礼物有纪念日期功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  6. 如何给HTML标签中的文本设置修饰线

    这篇文章主要介绍了如何给HTML标签中的文本设置修饰线，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  7. HTML5调用手机发短信和打电话功能

    这篇文章主要介绍了HTML5调用手机发短信和打电话功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  8. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，有兴趣的可以了解一下

  9. HTML利用九宫格原理进行网页布局

    这篇文章主要介绍了HTML利用九宫格原理进行网页布局,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  10. HTML中实现音乐或视频自动播放案例详解

    由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果，今天通过本文给大家分享下我基于HTML实现音乐或视频自动播放功能，代码简单易懂，需要的朋友参考下吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部