ajax，JSON

作者: 两分与桥 | 来源:发表于2018-09-06 07:22 被阅读22次

ajax 的实现
2018-09-15_JSON
ajax请求json数据
Day21--AJAX&JSON
Ajax&Json
27.Ajax & Json
ajax
Sprig MVC AJAX提交数据整理
前端传值给后台的三种方法
Spring MVC 接收参数整理(2)-接收来自Ajax的请求

是一种用来改善用户体验的技术，其本质是利用浏览器提供的
一个特殊的对象（XMLHttpRequest，也可称为ajax对象）向服务器
发送异步请求。服务器返回部分数据（通常不需要返回完整页面），
浏览器利用这些数据对当前页面做部分更新，整个过程，页面无刷新，不打断用户的操作。

异步请求：发送请求的同时，浏览器不会销毁当前页面，用户仍然可以对当前也页面做其他操作。

ajax对象的几个重要的属性

a. onreadystatechange：用来绑定一个事件处理函数，用来处理readystatechange事件。
注：当ajax对象的readystate属性值发生了任何改变（比如从0变成了1），就会产生readystatechange事件。

b. readyState：有五个值(0,1,2,3,4,5)，表示ajax对象与服务器通信的状态。
其中，当值为4时，表示ajax对象已经获得了服务器返回的所有数据。

c.responseText：获得服务器返回的文本数据。

d.responseXML；获得服务器返回的xml数据。

e.status：获得状态码

编程步骤

1.获得ajax对象，var xhr = getXhr();
2.发送请求
    发送get请求：
    - xhr.open("get", "check_login.do?name=libai", true)
        true：表示异步，false：表示同步（发送请求时，浏览器会锁定当前页面，不能操作）
    - xhr.onreadystatechange3=f1;
    - xhr.send(null);
    - 服务器处理数据，并返回，


var xhr = getXhr();
xhr.open("get", "check_login.do?name=libai", true);
xhr.onreadystatechange=f1;
xhr.send(null)
function f1() {
    if(xhr.readyState == 4 && xhr.status == 200){
        var txt = xhr. responseText;
    }
}

缓存问题，ie的旧版本浏览器可能会存在这个问题，
也就是对相同的地址发送get请求会缓存，不再发送新的请求
在get的请求路径后加上一个随机数，使得ie认为这个是一个新的路径，就可以解决这个问题


    发送post请求
    - xhr.open('post', 'check_login.do', true);
    - xhr.setRequestHeader('content-type','application/x-www-form-urlencodeed');
    - 注：按照http协议规范，如果发送的是post请求，在请求数据包里面，
    - 应该有content-type消息头。默认情况下，ajax对象不带该消息头，所以调用
    - setRequestHeader方法来设置这个消息头。
    - xhr.onreadystatechange = f1;
    - xhr.send('name=tom');

一个以get发送请求的例子

<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
</head>
<body>
<form method="post">
    <p>账号：<input type="text" name="username" id="username" onblur="check_username()"/></p>
    <p>密码：<input type="password" name="username" id="password"/></p>
    <span id="message"></span>
</form>

<script>
    function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveObject("Microsoft.XMLHttp");
        }
        return xhr;
    }
    
    function get_username(){
        return document.getElementById("username").value;
    }
    
    function get_password(){
        return document.getElementById("password").value;
    }
    
    function check_username(){
        var xhr = getXhr();
        xhr.open("get", "check_username.do?username="+get_username(), true);
        xhr.onreadystatechange = function (){
            if(xhr.readyState == 4 && xhr.status == 200){
                alert(xhr.responseText);
            }
        }
        xhr.send(null);
    }
</script>
</body>
</html>

编码问题

1.发送get请求
    ie浏览器会使用gbk进行编码，而其他浏览器会使用utf-8来编码，
    服务器端默认使用iso-8859-1来解码。所以会使用乱码。
    解决1：服务器端统一使用utf-8来编码。
        2：浏览器端使用encodeURI函数来编码。
            注：encodeURI是javaScript内置的一个函数。
2.发送post请求
    浏览器都是使用utf-8来编码，服务器默认使用iso-8859-1来解码，所以会产生乱码。
    解决：request.setCharsetEncoding("utf-8");

JSON

是一种轻量级的数据交换格式。
数据交换：将要交换的数据先转换成一种与平台无关的数据格式，然后交给接收方来处理。
轻量级：相对于xml，JSON文档更小，解析的速度更快。
    
语法：表示一个对象｛属性名：属性值，属性名：属性值···｝
属性名必须使用双引号括起来
属性值的类型可以时string，number，true/false，null，object。
属性值如果是string，必须使用双引号括起来。

使用JSON

将java对象转换为json字符串。可以使用json官方的工具。
导包json-lib，使用JSONObject，JSONArray。

    <dependency>
        <groupId>net.sf.json-lib</groupId>
        <artifactId>json-lib</artifactId>
        <version>2.4</version>
        <classifier>jdk15</classifier>  
    </dependency>

$.ajax({})，load()
作用：向1服务器发送异步请求，然后将服务器返回的数据直接添加到符合要求的节点之上。
$obj.load(url,[data])

将java对象转换为json字符串

package json;

import java.util.ArrayList;
import java.util.List;

import bean.Stock;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

 * 将java对象转换为json字符串
public class JsonTest {
    public static void main(String[] args) {
        test2();
    }
    
    public static void test1() {
        Stock s = new Stock();
        s.setCode("220");
        s.setPrice(250);
        s.setName("libai");
        JSONObject jsonObj = JSONObject.fromObject(s);
        String jsonStr = jsonObj.toString();
        System.out.println(jsonStr);
    }
    
     * 多个对象组成的数组或者集合转换成json字符串
    public static void test2() {
        List<Stock> stocks = new ArrayList<Stock>();
        for(int i=0; i<5; i++) {
            Stock s = new Stock();
            s.setCode("1996");
            s.setName("hangzhou");
            s.setPrice(220);
            stocks.add(s);
        }
        JSONArray jsonArray = JSONArray.fromObject(stocks);
        System.out.println(jsonArray);
    }
}

Spring mvc 使用JSON

- 导包 jackson
- 配置注解驱动
- Controller方法上增加@RequestBody

导包

  <dependencies>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>3.2.8.RELEASE</version>
    </dependency>
  </dependencies>

实体类

package entity;
import java.io.Serializable;

public class User implements Serializable{
    private int id;
    private String name;
    private String age;
}
省略一堆的get/set方法

sping-mvc.xml配置

    <!-- 启动注解驱动 -->
    <mvc:annotation-driven/>    
    <!-- 组件扫描 -->
    <context:component-scan base-package="controller"/>

package controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import entity.User;

@Controller
public class JsonController {
    
    @RequestMapping("/json1.do")
     * 调用jackson
    @ResponseBody
    public User jsonUser1() {
        User user = new User(1, "libai", "28");
        return user;
    }
    返回：{"id":1,"name":"libai","age":"28"}
    
    @RequestMapping("/json2.do")
    @ResponseBody
    public List<User> jsonUser2(){
        List<User> users = new ArrayList<User>();
        for(int i=0; i<10; i++) {
            User user = new User(i,"talent", "22");
            users.add(user);
        }
        return users;
    }
    返回：[{"id":0,"name":"talent","age":"22"},{"id":1,"name":"talent","age":"22"}] 删减一部分

    @RequestMapping("/json3.do")
    @ResponseBody
    public Map<String, Object> jsonUser3(){
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", "22");
        map.put("name", "libai");
        return map;
    }
    返回：{"name":"libai","id":"22"}

    @RequestMapping("/json4.do")
    @ResponseBody
    public Map<Integer, User> jsonUser4(){
        Map<Integer, User> map = new HashMap<Integer, User>();
        map.put(1, new User(1, "libai", "22"));
        map.put(2, new User(2, "talent", "23"));
        return map;
    }
    返回：{"1":{"id":1,"name":"libai","age":"22"},"2":{"id":2,"name":"talent","age":"23"}}
}

ajax 的实现
var $ = {}; $.ajax = ajax; function json2url(json){ var a...
2018-09-15_JSON
JSON APIS and AJAX Description:*Introduction to the JSON ...
ajax请求json数据
$.ajax({ url : "data.json", //json地址 datatype: "json"...
Day21--AJAX&JSON
AJAX JSON：
Ajax&Json
AJAX： JSON：案例：
27.Ajax & Json
AJAX： JSON：案例：
ajax
Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...
Sprig MVC AJAX提交数据整理
标签： SpringMVC @RequestBody Json AJAX 在使用SpringMVC+AJAX...
前端传值给后台的三种方法
1、通过ajax，示例：传给后台的数据通过json封装起来，再用ajax将json传到后台，ajax是用到Jqu...
Spring MVC 接收参数整理(2)-接收来自Ajax的请求
1.前端Ajax请求方式（1）Ajax发送json对象这种方式是提交的Json对象,contentType为:...