原生Ajax及jQuery处理Ajax的使用和入门含有代码示例

1什么是 AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有

JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript: 使用脚本对象 XMLHttpRequest 发送请求，接收响应数据

XML: 发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据

是 AJAX 请求的响应结果。

2 全局刷新和局部刷新

B/S 结构项目中，浏览器（Browse）负责把用户的请求和参数通过网络发送给服务器（Server）,服务端使用 Servlet（多种服务端技术的一种）接收请求，并将处理结果返回给浏览器。浏览器在 html，jsp 上呈现数据，混合使用 css， js 帮助美化页面，或响应事件

2.1 全局刷新

登录请求处理：

index.jsp 发起登录请求--------LoginServlet--------result.jsp

发起请求 request 阶段：

浏览器现在内存中是 index 页面的内容和数据：

服务器端应答结果阶段：

sevlet 返回后把数据全部覆盖掉原来 index 页面内容， result.jsp 覆盖了全部的浏览器

内存数据。整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等

全局刷新原理:

必须由浏览器亲自向服务端发送请求协议包。
这个行为导致服务端直接将【响应包】发送到浏览器内存中
这个行为导致浏览器内存中原有内容被覆盖掉
这个行为导致浏览器在展示数据时候，只有响应数据可以展示

2.2局部刷新

浏览器在展示数据时，此时在窗口既可以看到本次的响应数据，同时又可以看到浏览器内存中原有数据

局部刷新原理:

不能由浏览器发送请求给服务端
浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有收到任何影响.
这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据

我们要学习的AJAX 实现局部刷新的一种技术。

2.3 异步请求对象

在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。

代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。

全局刷新是同步行为，局部刷新是异步行为[浏览器数据没有全部更新

这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象。

XMLHttpRequest 对象能够：

在不重新加载页面的情况下更新网页
在页面已加载后向服务器请求数据
在页面已加载后从服务器接收数据

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest

对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法（xhr）：

var xmlhttp=new XMLHttpRequest();

AJAX 中的核心对象就是 XMLHttpRequest

3 原生的AJAX 异步实现步骤

（1）创建对象方式

var xmlHttp = new XMLHttpRequest();

（2）绑定onreadstatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变

时，就会触发 onreadystatechange 事件。此事件可以指定一个处理函数 function。

通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。

语法：

xmlHttp.onreadystatechange= function() {
   if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
       处理服务器返回数据 
     }
 }

下面是 XMLHttpRequest 对象的三个重要的属性说明：

onreadystatechange 属性（事件，可类比于onclick事件）：一个 js 函数名或直接定义函数，每当 readyState 属性改变时，就会调用该函数

readyState 属性：

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()

• 1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)

• 2: 异步对象发送请求， xmlHttp.send()

• 3: 异步对象接收应答数据从服务端返回数据。XMLHttpRequest 内部处理。

• 4: 异步请求对象已经将数据解析完毕。此时才可以读取数据。

status 属性：

200: "OK"

404: 未找到页面

这里我啰嗦两句：完成一次ajax异步刷新，XMLHttpRequest 对象的readyState的属性就会变化五次（0-4）

（3）初始化请求参数：

方法：

open(method,url,async) ：初始化异步请求对象

参数说明：

• method：请求的类型；GET 或 POST

• url：服务器的 servlet 地址

• async：true（异步）或 false（同步）

例如:

xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)

（4）发送请求

xmlHttp.send()

（5）接收服务器响应的数据

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或

responseXML 属性。

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

值得一提的是我们接收数据的时候应当确定ajax请求已经完成异步请求对象已经将数据解析完毕

也就是条件成立：xmlHttp.readyState == 4 && xmlHttp.status == 200成立

4 原生ajax实例

编写一个用户评论系统：

要求：

用户填写用户名，评论内容，填写完毕后点击按钮通过ajax提交到服务器，服务器记录用户提交内容,并加上评论的时间提交成功后服务器返回目前所有的评论列表，且将服务器返回的评论显示在用户界面上

用户界面：index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script src="js/jquery-3.7.1.min.js"></script>
  <body>
  <P>
    用户名：<input type="text" id="name">
  </P>
  <P>
    评论：<input type="text" id="text1"><br>
    <input id="bt" type="button" value="提交" onclick="doAjax3()">
  </P>
    <div id="box">
      
    </div>
  </body>
  <script type="text/javascript">
  function doAjax() {
     //（1） 创建对象方式
        //（2） 绑定onreadystatechange 事件
        //（3） 初始化请求参数：
        //（4） 发送请求
        //（5） 接收服务器响应的数据
      let ajax = new XMLHttpRequest();//创建对象方式
      let name = $("#name").val();
      let text1 = $("#text1").val();
      ajax.onreadystatechange = function (){//绑定onreadystatechange 事件
        if (ajax.readyState==4&&ajax.status==200){//ajax.readyState==4 即异步对象的状态为 接收到响应数据并已解析完成
          //在这里才能确定数据可以接受并处理
          var data1 = ajax.responseText;//接收服务器响应的数据
          // console.log(typeof data1)//String
          // let  ag = "你好"
          $("#box").prepend('<p>'+data1+'</p>')
          // alert("状态为4，准备处理接收数据！")
        }
        console.log(ajax.readyState);
      }
      ajax.open("get","ajaxServlet?name="+name+"&text1="+text1,true)//初始化请求参数
      ajax.send();//发送请求
    }
  </script>
</html>

服务器端：TextServlet.java

package com.lfq.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

@WebServlet("/ajaxServlet")
public class TextServlet extends HttpServlet {
     @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException {
        
    }
       @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        super.doGet(req, resp);
        Date date = new Date();
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyy-MM-dd hh:mm:ss");
        String timeNow = dateFormat.format(date);
        String name = req.getParameter("name");
        String text1 = req.getParameter("text1");
        String str = timeNow+" "+name+"的评论为："+text1;
//        req.setAttribute("msg",str);
//        req.getRequestDispatcher("/index.jsp").forward(req,resp);
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.println(str);//写入数据  响应给客户端
        writer.flush();
        writer.close();


    }
}

5 jQuery框架的ajax

5.1jQuery框架的ajax简介

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与 ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种：

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])

5.2GET请求方式

概述

通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能，如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.get(url, [data], [callback], [type])

其中，参数说明如下：

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key=value
callback	回调函数,服务器响应成功后,AJAX自动调用函数
type	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

这里我们根据上面的实例进行改编：（换汤不换药）

js代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <html>
    <head>
      <title>$Title$</title>
    </head>
    <script src="js/jquery-3.7.1.min.js"></script>
    <body>
      <P>
        用户名：<input type="text" id="name">
      </P>
      <P>
        评论：<input type="text" id="text1"><br>
        <input id="bt" type="button" value="提交" onclick="doAjax2()">
      </P>
      <div id="box">

      </div>
    </body>
    <script type="text/javascript">
      //$.get()方法请求
      function doAjax2(){
        let name1 = $("#name").val()
        let text1 = $("#text1").val()
        $.get(
          //GET 请求的 URL 路径可以用来传参。这种传参方式叫做 查询字符串传参。
          // 在 GET 请求中，参数被附加在 URL 的末尾，并通过 ? 符号开始，多个参数之间用 & 符号分隔。
          "ajaxServlet?name="+name1+"&text1="+text1,
          // "name="+name1+"&text1="+text1,//data：//发送给服务器端的请求参数(传入服务器的参数)，格式可以是key=value 可选
          //  {//json形式
          //    nameT:name1,
          //    text1:text1
          //  },
          function (data){//回调函数,服务器响应成功后,AJAX自动调用函数,这个函数接收返回的数据作为第一个参数  可选
            $("#box").prepend('<p>'+data+'</p>')
            alert(data);
          },
          "text"//dataType：预期返回数据的类型  可选
        )
      }
    </script>
  </html>

Servlet代码：

package com.lfq.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

@WebServlet("/ajaxServlet")
public class TextServlet extends HttpServlet {
     @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException {
        
    }
       @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        super.doGet(req, resp);
        Date date = new Date();
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyy-MM-dd hh:mm:ss");
        String timeNow = dateFormat.format(date);
        String name = req.getParameter("name");
        String text1 = req.getParameter("text1");
        String str = timeNow+" "+name+"的评论为："+text1;
//        req.setAttribute("msg",str);
//        req.getRequestDispatcher("/index.jsp").forward(req,resp);
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.println(str);//写入数据  响应给客户端
        writer.flush();
        writer.close();


    }
}

5.3POST请求方式

概述

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.post(url, [data], [callback], [type])