使用Ajxs和jQuery实现异步请求

本文介绍了如何利用JavaScript的HMLHttpRequest对象和jQuery库实现异步请求,特别是AJAX技术。主要内容包括理解AJAX的核心HMLHttpRequest对象,以及jQuery如何简化AJAX操作。此外,还探讨了JSON作为数据交换格式的重要角色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

HMLHttpRequest对象

jQuery简化Ajxs

JSON数据格式


Ajxs的全称是Asynchronous JavaScript and XML,他并不是一种全新的技术,而是由JavaScript、XML、CSS等集中现有的技术整合而成的。

HMLHttpRequest对象

HMLHttpRequest对象是Ajxs技术的核心,用于与服务器进行交互。他可以在不刷新当前页面的情况下向服务器上特定的URL异步发送请求、获取数据,从而在当前页面中实现布局更新的效果。

语法
xmlHttpRequest = new XMLHttpRequest();

js代码

<!--经典版本-->

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
     function a() {
     var id= document.getElementById("uname").value;
     //ajxs核心对象XMLHttpRequest()
     var xr=new XMLHttpRequest();
     //设置回调函数
       xr.onreadystatechange=callBack;
       //创建请求 三个参数第一个提交方式,第二个提交路径,第三个是否异步true表示异步,false表示同步,建议使用异步
       xr.open("get","Do_Uname?uname="+id,true);
       //发送请求 null代表上面已经?号有传值了所以下面为空,要是上面没有传值就填写在下面
       xr.send(null);

       //声明回调函数
       function callBack() {
         //接受返回的字符串文本  ajxs会返回四次结果只取最后一次添加判断
         if (xr.readyState==4 && xr.status==200){
           if(xr.responseText.trim()=="false"){
             document.getElementById("mess").innerHTML="该用户已被注册"
           }else {
             document.getElementById("mess").innerHTML = "该用户可以注册"
           }
         }

       }
     }
    </script>
  </head>
  <body>
  用户名:<input type="text" id="uname" onblur="a()"/>
  <span id="mess"></span>
  </body>
</html>

servlet代码

package servlet;
import entity.Banana;

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.util.ArrayList;
import java.util.List;

@WebServlet("/Do_Uname")
public class Do_Uname extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收时编译
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        //响应时编译
        resp.setContentType("text/html;charset=utf-8");
        String uname=req.getParameter("uname");

        //返回结果给ajxs 用out对象输出返回
        PrintWriter out=resp.getWriter();
        if("admin".equals(uname)){
            out.print("false");
        }else {
            out.print("true");
        }
    }
}

结果:

jQuery简化Ajxs

语法
$.ajax({settings})
settings方法参数,一般是键值对集合

常用配置参数

参数类型说明
urlString请求的URL,默认为当前地址
typeString请求方法(POST或GET,默认为GET),jQuey 1.9.0之后的版本可以只用method代替type
dataPlainObject或String或Array发送到服务器端的数据
dataTypeString预期服务器端返回的数据类型,可用类型有XML、HTML、Script、JSON、JSONP、Text
berforeSendFunction(jqXHR jqxhr,PlainObject settings)发送请求前调用的函数,可用于设置请求头等,返回false将终止请求。 jqxhr参数:可选,jqXHR是XMLHttpRequest的超集。 setting参数:可选,当前ajax()方法的setting对象
successFunction(任意类型 result,String textStatus,jqXHR jqxhr)请求被成功处理时调用的函数 result参数:可选,由服务器返回数据 textStatus参数:可选,描述请求状态的字符串 jqxhr参数:可选
errorFunction(jqXHR jqxhr ,String textStatus,jqXHR jqxhr)请求失败是调用的函数 jqxhr参数:可选 extStatus参数:可选,错误信息 errorTheown参数:可选,HTTP状态的文本描述
completeFunction(jqXHR jqxhr ,String textStatus)请求完成后调用的函数(无论是否成功或失败均调用)。 jqxhr参数:可选 textStatus参数:可选,描述请求状态的字符串
timeoutNumber设置请求超时时间
globalBoolean设置是都出发全局Ajxs事件,默认为true

JSON数据格式

JSON全称是JavaScript Object Notation,他是一种轻量级的数据交换格式

语法:键值对方式储存
var JSON对象={name:value,name:value,....}

 示例代码:

<!--使用jQuery简易版本-->

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="js/jquery.js"></script>
<script>
    function a() {
        //接收值
        var uname=$("#uname").val()
        //第二步以ajxs发出请求
        $.ajax({
            "url":"Do_Select",		//要请求的url路径
            "type":"post",			//发送请求的方式
            "dataType":"json",		//指定响应的数据格式
            "data":"uname="+uname,	//要发送到服务器的数据
            "success":function (data) {		//响应成功后要执行的代码
              /* if(data.trim()=="false"){
                   $("#mess").html("该用户已被注册");
               }else {
                   $("#mess").html("该用户可以 注册");
               }*/
                //使用循环输出
                $('div').empty();
                for (var i=0;i<data.length;i++){
                    var note="<p>";
                    note+=data[i].bid+"--";
                    note+=data[i].bcolor+"--";
                    note+="<p>";
                    //将循环结果插入到div中
                    $("div").append($(note));
                }

            },
            "error":function () {		//请求失败后面要执行的代码
                alert("报错")
            }
        });
    }
</script>
<body>
用户名:<input type="text" id="uname" onblur="a()"/>
<span id="mess"></span>
<button onclick="a()">点我查询</button>
<div>

</div>
</body>
</html>

servlet代码

package servlet;

import com.alibaba.fastjson.JSON;
import entity.Banana;
import org.omg.PortableServer.LIFESPAN_POLICY_ID;
import service.BananaService;
import service.imp.BananaServiceimp;

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.util.List;

@WebServlet("/Do_show")
public class Do_show extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        BananaService bs=new BananaServiceimp();
        List<Banana> list=bs.getAll();
        PrintWriter out=resp.getWriter();
        //将对象转化为Json字符串
        String res= JSON.toJSONString(list);
        out.print(res);
    }
}

结果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值