AJAX入门篇

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了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相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作