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

22,166次阅读
没有评论

共计 10390 个字符，预计需要花费 26 分钟才能阅读完成。

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 页面的内容和数据：

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

服务器端应答结果阶段：

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

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

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

全局刷新原理:

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

2.2 局部刷新

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

局部刷新原理:

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

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

我们要学习的 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 及 jQuery 处理 Ajax 的使用和入门 含有代码示例

要求：

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

用户界面：index.jsp



  
    $Title$
  
  
  
  

    用户名：
  

  

    评论：

服务器端：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();}
}

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

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 代码：


  
    
      $Title$
    
    
    
      

        用户名：
      

      

        评论：

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])

其中，参数说明如下：

参数名称

解释

url

请求的服务器端 url 地址

data

发送给服务器端的请求参数，格式可以是 key=value

callback

回调函数, 服务器响应成功后,AJAX 自动调用函数

type

预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul 等

代码：

  
    
      $Title$
    
    
    
      

        用户名：
      

      

        评论：

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 {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();}
       @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//        super.doGet(req, resp);

    }
}

5.4AJAX 请求方式

概述

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 get 和 post 方法。$.ajax() 方法可以更加详细的设置底层的参数。

语法

jQuery.ajax([settings])

其中，settings 是一个 js 字面量形式的对象，格式是 {name:value,name:value… …}，常用的 name 属性名如下：

属性名称

解释

url

请求的服务器端 url 地址

async

(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false

data

发送到服务器的数据，可以是键值对形式 k=v&k=v

type

(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”

dataType

预期服务器的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul 等

success

请求成功后的回调函数

error

请求失败时调用此函数

代码 

  
    
      $Title$
    
    
    
      

        用户名：
      

      

        评论：

        
      

      


      

    
    
  
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();}
}

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

    正文完
    发表至： 开发笔记
    2024-10-07
     0
    Yojack
    版权声明：本篇文章由 Yojack 于2024-10-07发表，共计10390字。
    转载说明：
    1 本网站名称：优杰开发笔记
    2 本站永久网址：https://yojack.cn
    3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
    4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
    7 站长邮箱：laylwenl@gmail.com
    Java单例模式的饿汉式与懒汉式实现比较
    nodejs/node-sass/sass-loader三者版本对应关系（已解决）
    哈希算法：保护数据完整性与安全的魔力
    【JavaWeb环境搭建】
    评论（没有评论）
    搜一搜,打开新世界
    热门文章
    WordPress3 和 jQuery（二）

    WordPress3 和 jQuery（二）

    原文：zh.annas-archive.org/md5/5EB3887BDFDDB364C2173BCD8CE...
    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    🔥博客主页：【 小扳_-CSDN 博客】❤感谢大家点赞👍收藏⭐评论✍ 文章目录         1.0 Rab...
    CSS3新增属性(15个案例 代码 效果图 素材)

    CSS3新增属性(15个案例 代码 效果图 素材)

    目录 1.rgba(透明度) 案例: 为图片添加蓝色的滤镜 1. 代码 2. 效果  2.opacity 属性...
    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    文章目录 一、fastjson 1.2.24 远程命令执行漏洞复现 二、shiro 反序列化漏洞(CVE-20...
    一文彻底搞定MySQL中的JSON类型，效率飞起。

    一文彻底搞定MySQL中的JSON类型，效率飞起。

    写在开头 JSON 类型通常用于存储非结构化的数据或者一些可变的数据，比如存储日志、配置信息等。我们有时候需要...
    一言
    -「」
    标签云
    ​ 图片懒加载.netcore1024程序员节1024程序员节 | 征文2021，目标20222023春节祝福3d3D呈现效果3D导航栏5G SoC7-ZipaardioadbAIaigcAirPods Maxai作画AI工具AI手机AI生成AI编程ajaxandroidandroid-studioangular.jsAngularJSanimationant-design-vueantdanti-design-vueapacheapiAPICloudapp登录页面arcgisarduinoasp.netattachmentawsaxiosa标签babelbackground背景精灵beautifulsoupbootstrapbreakbugc:Progran Filesnodejspnpm.pslc#c5全栈canvanscanvascanva可画cesium渐变材质chatgptchm手册Chromecjsoncnpmcocos2dcodemirrorcondacookie交互crosCrypto，web Crypto，Crypto加密CSScss 弹性布局CSS 选择器css，css点赞，css直播css，flex布局，reactnative布局css，Nestingcss，圆角三角形，三角形css，外描边，阴影，文字渐变CSS3CSS3DSpritecss3沿椭圆轨道旋转CSS优化css动画css基础css学习css居中对齐css属性css文字描边css新特性css盒模型CSS相对定位CSS继承性css视差滚动css视频CSS设置虚线css超出部分显示省略号css选择器curlc语言daemondata urldataVDcokerdecodeURIComponent