JSON，AJAX

一、JSON简介

JSON JavaScript 对象表示法（JavaScript Object Notation）是一种存储数据的方式。

二、设计使用

创建JSON对象：var gareen = {"name":"盖伦","hp":616};
这样就创建了一个JSON 对象
JSON对象由名称/值对组成名称和值之间用冒号:隔开
名称必须用双引号" 包含起来
值可以是任意javascript数据类型，字符串，布尔，数字，数组甚至是对象
不同的名称/值对之间用逗号 , 隔开

访问JSON对象：通过点. 访问JSON对象的属性

var gareen = {"name":"盖伦","hp":616};

document.write("英雄名称: " + gareen.name + "<br>");

document.write("英雄血量: " + gareen.hp + "<br>");

创建JSON数组：通过方括号[] 创建JSON 数组

var heros=

[

{"name":"盖伦","hp":616},

{"name":"提莫","hp":313},

{"name":"死歌","hp":432},

{"name":"火女","hp":389}

]

document.write("JSON数组大小"+heros.length);

访问JSON数组：和访问普通数组一样，通过下标访问 document.write( "第4个英雄是:" + heros[3].name);

对象转换：

JavaScript对象分内置对象(Number,String,Array,Date,Math)和自定义对象
JSON就是自定义对象，只不过是以JSON这样的数据组织方式表达出来
所以不存在JSON对象与JavaScript对象的转换问题

字符串转换为JSON对象：

通过字符串拼接得到一个JSON结构的字符串，并不是一个JSON对象。需要通过eval转换得到
转换的时候注意,eval 函数要以（开头，）结尾
或者使用JQuery的$.parseJSON转换函数

<script>
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var gareen = eval("("+s3+")");
document.write("这是一个JSON对象: " + gareen);
</script>

JSON对象转换为字符串：

json 对象因为是一个javascript对象，所以如果直接打印的话，看不到里面的内容。
有时候要看看这个对象是不是我们期望的，所以需要通过 JSON.stringify 函数把它转换为字符串

<script>
var hero = {"name":"盖伦","hp":"616"};
document.write("这是一个json 对象："+ hero);
document.write("<br>");
var heroString = JSON.stringify(hero)
document.write("这是一个json 字符串："+ heroString );
</script>

三、AJAX简介

通过AJAX Asynchronous JAvaScript and XML 实现异步刷新

使用：

用于用户名校验，

使用AJAX 通过无刷新验证账号是否存在

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> 
<span id="checkResult"></span>
 
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "checkName.jsp?name="+name;
 
  xmlhttp =new XMLHttpRequest();
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
  /*
null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
只有在用"POST"，并且需要发送参数的时候，才会使用到send。
类似这样：
xmlhttp.send("user="+username+"&password="+password)
  */
}
 
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
/*
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本
*/  
}

 
</script>

checkName.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<%
    String name = request.getParameter("name");
     
    if("abc".equals(name))
        out.print("<font color='red'>已经存在</font>");
    else
        out.print("<font color='green'>可以使用</font>");
     
%>

AJAX请求：四步走

1、创建XMLHttpRequest var xmlhttp = new XMLHttpRequest();

2、设置响应函数 xmlhttp.onreadystatechange = checkResult;

3、设置访问页面 xmlhttp.open("GET",url,true);

4、执行访问 xmlhttp.send(null);

AJAX响应：四步走

1、调用响应函数 function checkResult() { }

2、判断是否响应成功 if (xmlhttp.readyState == 4 &&xmlhttp.status == 200)

3、获取响应文本 document.getElementById('checkResult').innerHTML = xmlhttp.responseText;

4、显示响应文本

readyState: 存有XMLHttpRequest的状态，从0到4发生变化

0：请求未初始化

1：服务器链接已建立

2：请求已接收

3：请求处理中

4请求已完成，且响应已就绪

status： 200："OK" 404：未找到页面

一、JSON简介

二、设计使用

三、AJAX简介

使用：

猜你喜欢