ajax(json)学习笔记

最新推荐文章于 2024-08-07 15:18:06 发布

神奇的海螺先生

最新推荐文章于 2024-08-07 15:18:06 发布

阅读量258

点赞数

分类专栏：前端 jQuery 文章标签： ajax json

本文链接：https://blog.csdn.net/qq_38087648/article/details/78431428

版权

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

json(javascript object notation)

json是什么

一种轻量级的数据交换技术规范(因为借鉴了javascript对象创建的一种语法结构，故命名为json)
- 数据交换
将数据转换成一种中间的与平台无关的数据格式(比如xml或者json字符串)发送给另外一方来处理
- 轻量级
json相对于xml，所需要的数据大小要小得多，并且解析的速度要更快。

json语法(www.json.org)

表示一个对象{属性名：属性值，属性名：属性值..}
注意：属性名要使用引号括起来
属性值如果是字符串，必须要使用引号括起来
属性值可以是string，number，boolean，null，object
表示一个对象组成的数组

如何使用json来编写ajax应用程序

java对象转换成json字符串一般使用json官方提供的api(json-lib)来实现转换
json字符串转换成javascript对象可以使用一些工具提供的方法，比如prototype提供了evalJSON prototype是一个js文件里面提供了很多函数
1.$(id):document.ElementById();
2. $F(id):$ (id).value
3.$(id1,id2,id3)分别依据id1，id2查找对应的节点，然后放到一个数组里面返回
4.strip()：除掉字符串两端的空格
5.evalJSON():将json字符串转化成对应的javascript对象或者javascript对象组成的数组

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/prototype-1.7.js"></script>
<script type="text/javascript">
/**
 * 将一个json字符串转换成一个js对象
 */
    function f1(){
        var str = '{"name":"ww","age":32}';
        //使用prototype提供的evalJSON函数，将json字符串转换为js对象
        var obj = str.evalJSON();
        alert(obj.name);
    }
    //将json字符串转换成一个javascript对象组成的数组
    function f2(){
        var str = '[{"name":"2b","age":25},'+'{"name":"sb","age":35}]';
        var arr = str.evalJSON();
        alert(arr[1].name);
    }
</script>
</head>
<body style="font-size:30px;">
    <a href = "javascript:;" onclick="f2();">点击</a>
</body>
</html>

案例

模拟八只股票的实时刷新

配置xml文件，个人学习，架包位于lib文件夹下

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>ajaxDemo</display-name>
    <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>


        <!-- 配置一个servlet -->
   <servlet>
        <servlet-name>ActionServlet</servlet-name>
      <servlet-class>web.ActionServlet</servlet-class>
    </servlet>

     <!-- 配置一个servlet映射的URL路径 -->
  <servlet-mapping>
         <servlet-name>ActionServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>

注意：标签与中的标签属性值一定相同
用于存放servlet层的路径，包含包名与类名，用.连接，而非/

servlet层

Stock类

package bean;

public class Stock {
    private String name;
    private String code;
    private double price;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public double getPrice() {
        return price;
    }
    public void setPrice(double price) {
        this.price = price;
    }

}

public class ActionServlet extends HttpServlet {
    public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri = request.getRequestURI();
        String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
        if(action.equals("/quoto")) {
            //模拟生成八只股票的价格信息
            //然后将这些信息转换成json字符串，并发送到客户端
            List<Stock> stocks = new ArrayList<Stock>();
            Random r = new Random();
            DecimalFormat df = new DecimalFormat("#.##");
            for(int i=0;i<8;i++) {
                Stock s = new Stock();
                s.setName(("深发展")+r.nextInt(10));
                s.setCode("60001"+r.nextInt(10));
                double price = r.nextInt(100)+r.nextDouble();
                s.setPrice(Double.parseDouble(df.format(price)));
                stocks.add(s);
            }
            JSONArray arr = JSONArray.fromObject(stocks);
            String jsonStr = arr.toString();
            out.println(jsonStr);
        }
        out.close();
    }
}

注意：因为配置xml文件时，配置了*.do，所以servlet层不需要再次书写注解，由于.do的摒弃，在以后的学习中进行学习新的前端与后台连接知识

前端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/prototype-1.7.js"></script>
<script type="text/javascript">
/**
 * 将一个json字符串转换成一个js对象
 */
    function f1(){
        var str = '{"name":"ww","age":32}';
        //使用prototype提供的evalJSON函数，将json字符串转换为js对象
        var obj = str.evalJSON();
        alert(obj.name);
    }
    //将json字符串转换成一个javascript对象组成的数组
    function f2(){
        var str = '[{"name":"2b","age":25},'+'{"name":"sb","age":35}]';
        var arr = str.evalJSON();
        alert(arr[1].name);
    }
</script>
</head>
<body style="font-size:30px;">
    <a href = "javascript:;" onclick="f2();">点击</a>
</body>
</html>

my.js用于对浏览器的判断

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}