Ajax

作者: 雷哒哒 | 来源:发表于2020-01-01 20:41 被阅读0次

[TOC]

第一章：AJAX

1.1-概述

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

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

1.2-原生js实现AJAX

实现步骤

创建XMLHttpRequest对象
和服务端建立连接
发送请求
注册onreadystatechange事件，监听响应

快速入门

<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请求参数

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封装

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

参数：

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

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

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

解析方式

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

代码

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

使用步骤

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

jar包下载

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

解析方式

Java对象转换JSON字符串
- String writeValueAsString(Object var1)
- void writeValue(File var1, Object var2)
- void writeValue(Writer var1, Object var2)
- void writeValue(OutputStream var1, Object var2)
JSON字符串转换Java对象，较少使用
- public <T> T readValue(String var1, Class<T> var2)

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

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

代码

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

  }
}

第三章：案例

需求

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

代码

前端

<%@ 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);
  }
}

Ajax

第一章：AJAX

1.1-概述

1.2-原生js实现AJAX

1.3-jQuery操作Ajax

第二章：JSON

2.1-概述

2.2-语法规则和取值

2.3-JS解析JSON

2.4-Java解析JSON

第三章：案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaWeb