AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Ajax

分类：Ajax作者：编程之家原文地址

目录

第一章：AJAX

1.1-概述

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML） ，Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，提高用户体验。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1.2-原生js实现AJAX

实现步骤

@H_502_60@
  1. 创建XMLHttpRequest对象
  2. 和服务端建立连接
  3. 发送请求
  4. 注册onreadystatechange事件，监听响应

快速入门

@H_502_60@ 
<button id="btn">发送请求</button>
<h3></h3>
<script>
    var btn = document.querySelector("#btn");
    btn.onclick = function () {
        // 【1. 创建XMLHttpRequest对象】
        var xmlHttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 【2.建立连接】
        // 参数1：请求方式，get或post
        // 参数2：请求路径
        // 参数3：是否为异步。true异步，false同步
        xmlhttp.open("GET", "ajaxServlet01?userName=张三", true);
        // 【3.发送请求】
        xmlhttp.send();
        // 【4. 监听响应】
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.querySelector("h3").innerHTML = xmlhttp.responseText;
            }
        }
    }

</script>

get和post请求参数

@H_502_60@

get请求：在请求路径后面拼接 路径?key=value&key=value

post请求：send(string)

  • 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  • xmlhttp.send("key=value&key=value")

ajax封装

@H_502_60@

ajax.js

(function (global) {
    /**
     * 封装ajax
     * @param obj
     * obj.method 请求方式，get或post
     * obj.params 请求参数，{key:value}
     * obj.src 请求路径
     * obj.success 请求成功的回调
     * obj.error 请求失败的回调
     */
    function ajax(obj){
        var method = obj.method||"get";
        var params = getParams(obj.params);
        var src = obj.src;
        // 【1. 创建XMLHttpRequest对象】
        var xmlHttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 【2.建立连接】
        if(method.toLowerCase()=="get"){
            if(params){
                src+="?" + params;
            }
            xmlhttp.open(method,src, true);
            // 【3.发送请求】
            xmlhttp.send();
        }else if(method.toLowerCase()=="post"){
            xmlhttp.open(method, src, true);
            if(params){
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            }
            // 【3.发送请求】
            xmlhttp.send(params);
        }

        // 【4. 监听响应】
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                if(obj.success){
                    obj.success(xmlhttp.responseText);
                }
            }else {
                if(obj.error){
                    obj.error(xmlhttp.status);
                }
            }
        }
    }
    function getParams(o){
        var o = o||{};
        var strs=[];
        for(var key in o){
            strs.push(key + "=" + o[key]);
        }
        return strs.join("&");
    }
    global.ajax = ajax;
})(window);

html页面

<button id="btn">发送请求</button>
<h3></h3>
<script src="js/ajax.js"></script>
<script>
    var btn = document.querySelector("#btn");
    btn.onclick = function () {
        ajax({
            method:"get",
            src:"ajaxServlet01",
            params:{userName:'李四'},
            success:function (data) {
                document.querySelector("h3").innerText=data;
            }
        })
    }

</script>

1.3-jQuery操作Ajax

方法： $.ajax(url,[settings]) 或 $.ajax([settings])

@H_502_60@

参数：

  • url，请求路径
  • type，请求方式，get或post
  • data，请求参数
  • dataType，预期预期服务器返回的数据类型 ，如：text、json等
  • success，请求成功回调，通过传入形参获取服务端响应内容
  • error，请求失败回调，通过传入形参获取请求失败信息

代码：

<button id="btn">发送请求</button>
<h3 id="h3"></h3>
<script src="js/jquery.js"></script>
<script>
    var btn = document.querySelector("#btn");
    btn.onclick = function () {
        $.ajax({
            url:'ajaxServlet011',
            data:{userName:'张三'},
            type:'post',
            dataType:"text",
            success:function(data){
                h3.innerText = data;
            },
            error:function(msg){
                h3.innerText = msg.status;

            }
        });
    }

</script>

方法：$.get(url,[data],[fn],[type])

@H_502_60@

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.get("ajaxServlet01",{userName:'张三'},function(data){
      h3.innerText = data;
},"text")

方法：$.post(url,[data],[fn],[type])

@H_502_60@

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post("ajaxServlet01",{userName:'张三'},function(data){
    h3.innerText = data;
},"text")

第二章：JSON

2.1-概述

  • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
  • JSON 具有自我描述性，更易理解

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

2.2-语法规则和取值

语法规则：

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 中括号保存数组

取值：

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在中括号中）
  • 对象（在大括号中）
  • null
{name:"张三",age:10,isDel:false}
["张三","老四","王五"]

2.3-JS解析JSON

解析方式

@H_502_60@
  • JSON.parse(jsonStr);
  • JSON.stringify(jsonObj)
    • 将对象转换为字符串

代码

@H_502_60@ 
var str = JSON.stringify({name:"张三",age:10,isDel:false});
// 结果：'{"name":"张三","age":10,"isDel":false}'
var obj = JSON.parse(str);
// 结果：{name:"张三",age:10,isDel:false}

2.4-Java解析JSON

使用步骤

@H_502_60@
  1. 导入相关JSON解析器的jar包，在此使用的是jackson解析器
  2. 创建核心对象，ObjectMapper
  3. 使用相关方法解析

jar包下载

@H_502_60@

链接：https://pan.baidu.com/s/19KAj3kYs3AwA13dvph9hzw
提取码：dcs8

解析方式

@H_502_60@
  1. Java对象转换JSON字符串
    • String writeValueAsstring(Object var1)
    • void writeValue(File var1, Object var2)
    • void writeValue(Writer var1, Object var2)
    • void writeValue(OutputStream var1, Object var2)
  2. JSON字符串转换Java对象，较少使用
    • public <T> T readValue(String var1, Class<T> var2)

Java对象属性Json解析注解控制

@H_502_60@
  • @JsonIgnore
    • 忽略解析被标注此注解的属性
  • @JsonFormat(pattern="yyyy-MM-dd")
    • 解析日期格式化控制

代码

@H_502_60@

Person对象

package cn.it.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Person {
  private String name;
  private int age;
  private String gender;
  private double money;
  @JsonIgnore
  private int id;
  @JsonFormat(pattern="yyyy-MM-dd")
  private Date date;
  public Person() {
  }
  public Person(String name, int age, String gender, double money) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.money = money;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getAge() {
    return age;
  }

  public void setAge(int age) {
    this.age = age;
  }

  public String getGender() {
    return gender;
  }

  public void setGender(String gender) {
    this.gender = gender;
  }

  public double getMoney() {
    return money;
  }

  public void setMoney(double money) {
    this.money = money;
  }

  public int getId() {
    return id;
  }

  public void setId(int id) {
    this.id = id;
  }

  public Date getDate() {
    return date;
  }

  public void setDate(Date date) {
    this.date = date;
  }

  @Override
  public String toString() {
    return "Person{" +
            "name='" + name + '\'' +
            ", age=" + age +
            ", gender='" + gender + '\'' +
            ", money=" + money +
            ", id=" + id +
            ", date=" + date +
            '}';
  }
}

Test01.java

public class Test01 {
  @Test
  public void show01() throws Exception {
    // Java对象
    Person p1 = new Person("张三",10,"男",1000);
    p1.setDate(new Date());
    // 创建ObjectMapper对象
    ObjectMapper mapper = new ObjectMapper();
    // 将Java对象p1转换为Json字符串
    String str = mapper.writeValueAsstring(p1);
    System.out.println(str);// 结果：{"name":"张三","age":10,"gender":"男","money":1000.0}
    // 将Java对象p1转换为Json字符串并写入指定的文件中
    mapper.writeValue(new File("data.txt"),p1);
    // 将Java对象p1转换为Json字符串并写入指定的字符串输出流
    mapper.writeValue(new FileWriter("a.txt"),p1);
    mapper.writeValue(new FileOutputStream("c.txt"),p1);
    // 讲Json转换为Java对象
    Person p = mapper.readValue(str,Person.class);
    System.out.println(p);

  }
}

第三章：案例

需求

@H_502_60@

异步检测用户名是否存在，若存在，则提示用户更换

代码

@H_502_60@

前端

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
</head>
<body>
    <p>
        <label for="userName">用户名：</label>
        <input type="text" placeholder="请输入用户名" id="userName">
        <span></span>
    </p>
    <p>
        <button>注册</button>
    </p>
    <script>
        $("#userName").blur(function(){
            var value = $(this).val();
            $.get("checkRegister",{userName:value},function (data) {
                if(data.isHas){
                    // 用户名存在
                    $("span").css("color","red").text("此用户名太受欢迎了，请更换！")
                }else{
                    // 可以使用
                    $("span").css("color","green").text("√");
                }
            },"json");
        });
    </script>
</body>
</html>

后端

package cn.it.ServletTest;

import com.fasterxml.jackson.databind.ObjectMapper;

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.util.HashMap;
import java.util.Map;

@WebServlet("/checkRegister")
public class CheckRegister extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException {
    request.setCharacterEncoding("utf-8");
    String name = request.getParameter("userName");
    Map<String,Object> map = new HashMap<>();
    if(name.equals("bruce")){
      map.put("isHas",true);
    }else {
      map.put("isHas",false);
    }
    ObjectMapper mapper = new ObjectMapper();
    mapper.writeValue(response.getWriter(),map);
  }

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException {
    this.doPost(request, response);
  }
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native