Ajax基础与Json应用(一）
一.Ajax概念
Ajax是异步的javacript和xml
发音：
Ajax [ˈeɪˌdʒæks]javascript
二.同步与异步
传统方式（同步）：一个请求对应一个回应，他们是同步的，回应不完成，没办法对这个页面进行操做。
具体解释：
客户端要发一个请求，服务器端要去处理，响应，这时候客户端彻底是在等待，等待服务器端的处理和响应。当服务器端的处理和响应完成事后，客户端会从新载入页面，这时候若是有错误，只能再次发起请求，再次等待。
异步：
说明：填写复杂的表单，填写到邮箱地址的时候，页面当时就把邮箱的地址发送到服务器，也就是页面发送了一个请求，服务器去作处理和响应，获得你的邮箱和地址填写重复，他会把响应结果发给页面，可是在这个过程当中，依然能够填写其余的内容。这时候服务器告诉你已经有重复的邮箱的地址，在页面的表现只是在邮箱地址的旁边标上一行字，把整个文本框标红，并无从新刷新页面，这样 表单上的错误会实时的标注出来，你也能够实时的更正错误。这个过程你不会有整个页面的刷新，也不会有整个页面的提交和等待。也就是说：当你最后点击一下提交，一切都会搞定，这就是ajax出现后的异步。
**异步实现步骤：*8
1.运用HTML和CSS来实现页面，表达信息。
2.运用XMLHttpRequest和web服务器进行数据的异步交换
3.运用JavaScript操做DOM，实现动态局部刷新php
三.XMLHttpRequest对象建立
首先要是实例化一个XMLHttpRequest对象
var request = new XMLHttpRequest();
注意:
全部现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。
Ie5,ie6是不支持标准的XMLHttpRequest的.html
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");
}
四.Http请求
http是计算机经过网络进行通讯的规则
http是一种无状态协议
1.一个完整的HTTP请求的过程，一般有7个步骤：
（1）创建TCP链接
（2）Web浏览器向Web服务器发送请求命令
（3）Web浏览器发送请求头信息
（4）Web服务器应答
（5）Web服务器发送应答头信息
（6）Web服务器向浏览器发送数据
（7）Web服务器关闭TCP链接
2.一个HTTP请求通常由四部分组成：
（1）HTTP请求的方法或动做，好比是GET仍是POST请求。
（2）正在请求的URL，总得知道请求的地址是什么吧
（3）请求头，包含一些客户端环境信息，身份证信息等
（4）请求体，也就是请求正文，请求正文中能够包含客户提交的查询字符串信息，表单信息等等。
（通常请求头和请求体之间有个空行，这个空行很重要，表示请求头已经结束了，）
HTTP请求例子：
3.提交数据的方式
GET方法：
通常用于信息获取
使用URL传递参数
对于发送的信息数量也有限制，通常在2000个字符左右
POST方法：
通常用于修改服务器上的资源。 对于所发的信息量无限制
4.一个HTTP响应通常由三部分组成
（1）一个数字和文字组成的状态码，用来显示请求成功仍是失败；
（2）响应头，响应头也和请求头同样，包含许多包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。
（3）响应体，也就是响应正文。
5.HTTP状态码：
HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：
1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中。
2XX：成功，表示用户请求被正确接收，理解和处理，例如：200 OK
3XX：重定向，表示请求没有成功，客户必须采起进一步的动做
4XX：客户端错误，表示客户端提交的请求有错误，例如：400 NOT FOUND 意味着请求中所引发的文档不存在
5XX：服务器错误，表示服务器不能完成对请求的处理：如500
java
五.xmlhttprequest发送请求
open(method,url,async) 发送请求方法 地址 请求同步/异步,通常是异步，默认值为true
send(string)
在使用 GET 方式请求时无需填写参数
在使用 POST 方式时参数表明着向服务器发送的数据web
例子
setRequestHeader 必需要写在 open（）和sent（）的中间，不然会出错误ajax
//完整的GET请求
var oAjax = new XMLHttpRequest();//建立Ajax对象
oAjax.open("GET","create.php",true);//链接服务器
oAjax.send();//发送请求
//完整的POST发送请求
var oAjax = new XMLHttpRequest();//建立
oAjax.open("POST","create.php",true);//"POST"
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置HTTP头信息.必须在open与send之间,不然出现异常.
oAjax.send("name=陈二狗&sex=男");//发送给服务器的内容
六.xmlhttprequest获取响应
XMLHttpRequest取得响应：
1.建立XMLHttpRequest对象;
2.调用open();
3.放入一些数据;
4.对这个过程进行监听，来知道服务器是否作出响应；
5.作一些事情，好比说获取服务器响应的内容、页面上的一些重现。
对服务器的相应进行监听：chrome
request.onreadystatechange = function({……})
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
//处理request.responseText
}
}
六. 配置php服务器环境-安装配置xampp
首先须要下载xampp的安装包。
http://xampps.com/
解压安装包，安装地点在D盘，安装完成，启动XAMPP
在XAMPP控制面板中，咱们能够看到Service一列的单选框略有不一样，“X”表示相应组件尚未设为Windows系统服务；“空白”表示没有安装该组件；此外还有“√”，表示该组件已经安装成为Windows系统服务，能够start。
下面咱们就单击Apache和MySQL前的“X”，在弹出的对话框中点击“Yes”，将它们设为系统服务。
第1步：点击XAMPP控制面板上的start按钮，启动Apache服务器。如图所示，启动Apache后会在按钮和下方状态中看到变化
咱们看到面板上输出了xampp的初始化日志。
提示Apache的80端口被占用了，
因而win+r 运行cmd，输入netstat -ano
看来咱们须要修改系统设置来更换一个端口号。
点击右上角的【系统设置】->【Service and Port Settings】，修改对应的端口号，而后点击【Save】保存。
修改Apache端口后，须要同时修改配置文件。
点击Apache后的【Config】，选择httpd- conf，打开配置文件。
搜索Listen，把后边的端口号，调整为咱们刚刚修改后的端口号，保存。重启下电脑
回到控制面板，点击咱们要启动的应用后边的【Start】，面板上【Module】列变色，【PID】有值，说明咱们的程序启动好了。
打开浏览器，输入localhost，看到了php相关的信息。
至此，咱们的环境已经搭建好了。
第2步：Apache默认的应用程序运行的根目录是\xampp\htdocs，打开htdocs文件夹，咱们会发现最后有一个index.php文件，接下来咱们就要在浏览器中访问这个文件，验证PHP环境是否已经配置成功。
第3步：打开浏览器，输入网址：http://localhost:81/index.php，
出现XAMPP的管理页面，说明PHP能够正常运行，环境搭建成功。接下来就能够编写PHP进行项目开发了。
问题：个人网络文档应该放在哪里？
全部网络文档都放在 htdocs 主文件夹中（.\xampp\htdocs）。
1）找到配置文件，并在xampp/htdocs下面新建一个文件夹做为你的根目录，譬如：demo。
2）、在根目录随便建立一个HTML文件，输入文字以备测试，譬如：index.html
三、打开chrome浏览器，输入：localhost/根目录/HTML文件名，若是能够出现就说明运行本地服务器成功，譬如：
localhost/demo/index.html数据库
七.简单的ajax例子
1.例子概述
（1）查询员工的基本信息，经过查询员工的编号来查询员工的基本信息
（2）新建员工信息，包括员工姓名，员工编号，员工性别，员工岗位
这个例子中；
Html页面，用来实现员工查询和新建的页面
Php页面，用来实现查询员工和新建员工的后台接口
2.设置站点
上面咱们已经配置好了php环境，咱们来用dreamwear设置下站点
php测试页面json
<h1> 这是一个测试页面
<?php
echo "hello word"
?>
</h1>
解释下：
(1)php是以<?php 开头，以?>结尾
(2)php的默认文件扩展名是.php
(3)php的语句是以;结尾
(4)echo() 函数输出一个或多个字符串。
直接输出字符或字符串的意思：例如：echo "abc"; 就会输出abc echo 'abc' 同样是输出abc . 若是仅仅只输出字符串的话，单引号和双引号是输出内容是同样的，若是要输出字符串变量，例如字符串变\(a='abc'; echo "\)a123" 则会输出abc123 ,但若是用 echo '\(a123' 则只会输出\)a123 ,也就是说单引号里面的内容会原样输出，而双引号则会判断里面有没有变量，有变量的话则转化为变量的值。
结果：
3.页面设置
Php页面（用来实现查询员工和新建员工的后台接口）：数组
<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); //响应过来的内容格式是纯文本
//header("Content-Type: application/json;charset=utf-8"); //响应过来的内容格式是json字符串
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8");
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组，定义姓名编号岗位。
//它能够包含这样一个键值的方式。由于这只是一个简单的例子，因此就把员工的信息都定义在多维数组中，而再也不存储数据库。
$staff = array
(
array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
);
//判断若是是get请求，则进行搜索；若是是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的所有做用域中均可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
//经过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo "参数错误";
return;
}
//函数以外声明的变量拥有 Global 做用域，只能在函数之外进行访问。
//global 关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = "没有找到员工。";
//遍历$staff多维数组，查找key值为number的员工是否存在，若是存在，则修改返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] .
"，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
break;
}
}
echo $result;
}
//建立员工
function create(){
//判断信息是否填写彻底
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])) {
echo "参数错误，员工信息填写不全";
return;
}
//TODO: 获取POST表单数据并保存到数据库
//提示保存成功
echo "员工：" . $_POST["name"] . " 信息保存成功！";
}
?>
相关知识点：
1)
PHP文件插入header("Content-type: text/html; charset=utf-8");
至关于页面里面的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2)
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组，定义姓名编号岗位。
//它能够包含这样一个键值的方式。由于这只是一个简单的例子，因此就把员工的信息都定义在多维数组中，而再也不存储数据库。
$staff = array
(
array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
);
3)请求的判断
$_SERVER是一个超全局变量，在一个脚本的所有做用域中均可用，不用使用global关键字
在函数中使用$staff这样一个全局变量。咱们须要这样global $staff;来定义一下，不然直接使用$staff会报错
可是这种超全局变量就不会出现这种状况，咱们在哪里均可以使用，
$_SERVER["REQUEST_METHOD"]这个变量表示的是表单提交数据的方式，get或者post
4)经过员工编号搜索员工思路
if (!isset($_GET["number"]) empty($_GET["number"])) {
echo "参数错误";
return;
}
（1）首先咱们检查一下参数里边有没有员工的编号，若是没有员工的编号，咱们是无法搜索员工的
（2）先检查一下咱们的GET的url参数中有没有number这么一个字段，isset是检查变量是否设置，也就是这个number变量有没有，empty表明这个变量是否为空，在这里，若是这个变量没有或者为空，咱们都显示参数错误：echo "参数错误";也就是说页面直接返回“参数错误”,在浏览器中预览一下，咱们没有任何参数的状况下，表明的是一个get请求，当咱们没有加number参数的时候。它会直接返回参数错误，固然若是有参数错误，就直接查询了。查询，就把这个number参数获取到。
（3）查询结果，先是没有找到，而后遍历$staff多维数组，若是数组中某条记录的number等于咱们传进来的员工编号，就把这个结果改为找到员工，并显示员工信息，而后终止循环，把结果打印出来。
//函数以外声明的变量拥有 Global 做用域，只能在函数之外进行访问。
//global 关键词用于访问函数内的全局变量，在函数中使用$staff这样一个全局变量。//咱们须要这样global $staff;来定义一下，不然直接使用$staff会报错
global $staff;
//获取number参数
$number = $_GET["number"];
$result = "没有找到员工。";
//遍历$staff多维数组，查找key值为number的员工是否存在，若是存在，则修改//返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] .
"，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
break;
}
}
5)新建员工信息思路
（1）咱们先判断下信息是否填写彻底，name，number，sex，job等等这些字段是否是都有值。
（2）一旦某个字段没有值!isset($_POST["name"])或者值为空empty($_POST["name"])
，就显示参数错误，员工信息填写不全echo "参数错误，员工信息填写不全";
//建立员工
function create(){
//判断信息是否填写彻底
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])) {
echo "参数错误，员工信息填写不全";
return;
}
//TODO: 获取POST表单数据并保存到数据库
//提示保存成功
echo "员工：" . $_POST["name"] . " 信息保存成功！";
}
6.服务器端测试
你们在平常进行web开发的时候，有时候后台作好以后，老是等待依赖前台作好以后，能够去调试，其实彻底没有必要
咱们只须要约定好接口， 发送的报文和返回的报文，经过fiddler或者相似的工具，直接就能够进行调试了。不须要依赖前台是否完成
在没有客户端的状况下对服务端信息进行测试
1）
Excute执行以后，左边会有一条信息
双击这条信息，右侧的textview下方会有服务器返回的相应信息
2）http://localhost/ajaxdemo/server.php?number=101
获得结果
3).post请求
(1）由于是post请求，因此服务器地址不须要加上参数
(2）须要加上Content-Type:"application/x-www-form-urlencoded"
(3）须要在Request Body里填写息相关信息
获得结果
7.客户端测试
html页面：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
alert
<script>
document.getElementById("search").onclick = function() {
//发送查询请求并调用
//new一个XMLHttpRequest()
var request;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
request=new XMLHttpRequest();
}
else
{// code for IE6, IE5
reques=new ActiveXObject("Microsoft.XMLHTTP");
}
//请求的地址须要带参数，参数为id为keyword的input的值
//get方式添加数据
request.open("GET", "server.php?number="+encodeURI（document.getElementById('keyword').value）+"&" + new Date().getTime() );
request.send();
request.onreadystatechange = function() {
//获取服务器上的readystate的改变,当他为4的时候说明请求已经结束了，当他为202的时候说明请求成功
//先判断他readystate是否为4，当他为202的时候id为searchResult的内容为 request.responseText，不然alert
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("searchResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}
document.getElementById("save").onclick = function() {
//发送查询请求并调用
//new一个XMLHttpRequest()
var request;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
request=new XMLHttpRequest();
}
else
{// code for IE6, IE5
reques=new ActiveXObject("Microsoft.XMLHTTP");
}
//由于是post请求，请求的地址不须要带参数
request.open("POST", "server.php");
//post请求，数据的参数构造，传入id为id为staffName，id为staffNumber，id为staffSex和id为staffJob的值
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
//由于是post请求，因此须要设置HTTP头信息.并且必须在open与send之间,不然出现异常.
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("createResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}
</script>
</body>
</html>
注意：
GET方式:
(1)使用GET方式发送请求时，地址的参数须要编码，为避免乱码
数据以问号开始，名和值之间用等号连接，名值对之间用和号(&)分隔。使用GET方式发送的数据经常被称为查询字符串
xhr.open("get","example.php?name1=value1&name2=value2",true)
(2)避免缓存
为了保证参数的绝对惟一性,须要加 时间戳 或随机数
测试：
F12的network
在按钮中输入101，点击查询
双击左侧出现的那条信息，在右侧可看到服务器的信息
相关问题：
问：php地址栏输入参数问题，为何能够在地址栏直接搜索number查询员工，我没看到哪里有ajax请求啊？？
答：
php页面中模拟了一个二维数组做为数据库存储的数据，在地址栏经过键值对的形式只是在php页面中增长这样一个员工信息，用来验证php页面是否有语法错误，是不须要经过客户端问：
向服务器发送请求的
POST http://localhost:8080/ajaxdemo/server.php User-Agent: Fiddler Host: localhost:8080 Content-Type: application/x-www-form-urldecoded Content-Length: 50 Request Body name=欧阳锋&number=104&sex=男&job=测试经理
结果是“参数错误，员工信息填写不全”这是怎么回事啊？
答：
post发送的信息是通过哈希值加密的，加密是encoded,解密是decoded.
Content-Type: application/x-www-form-urldecoded这是改为encoded。
八.json格式
JSON，就是一种数据传输格式而已，其实JSON最大的用处是处理JavaScript和web服务器端之间数据交换。
JSON结构共有2种：
（1）对象结构；
（2）数组结构；
1)JSON对象结构
对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。
语法：
var jsonObj = { "键名1":值1, "键名2":值2, …… "键名n":值n }
说明：
jsonObj指的是json对象。对象结构是以“{”开始，到“}”结束。其中“键名”和“值”之间用英文冒号构成对，两个“键名:值”之间用英文逗号分隔。
注意，这里的键名是字符串，可是值能够是数值、字符串、对象、数组或逻辑true和false。
(1)从JSON中读数据
jsonObj.key jsonObj["key"]
说明：
jsonObj指的是JSON对象，key指的是键名。读取JSON数据使用的是“.”操做符，这个跟JavaScript对象读取属性值是差很少的。
好比：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var obj =
{
"name":"123",
"age":23,
"hobby":"562",
}
}
//读取JSON数据
document.write("名字是："+obj.name+"
");
document.write("第一项爱好是："+obj.hobby);
</script>
</head>
<body>
</body>>
</html>
结果：
输出：名字是：123 第一项爱好是：567
(2)向JSON写数据
对于JSON对象结构，要往JSON中增长一条数据，也是使用“.”操做符。
语法：
jsonObj.key = 值; jsonObj["key"] = 值;
说明：
jsonObj指的是JSON对象，key指的是键名
例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var obj =
{
"name":"小名",
"age":23,
"hobby":"dance",
}
}
obj.sex = "男"; //或者obj["sex"]="男";
document.write("性别是："+obj.sex);
</script>
</head>
<body>
</body>
</html>
结果：
输出 性别是：男
(3)修改JSON中的数据
对于JSON对象结构，要修改JSON中的数据，也是使用“.”操做符。
语法：
jsonObj.key = 新值;
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var obj =
{
"name":"小名",
"sex":"男",
"age":23,
"hobby":"dance",
}
}
obj.name = "小杰"; //或者obj["name"]="小杰";
document.write("姓名是："+obj.name);
</script>
</head>
<body>
</body>
</html>
输出：姓名是：小杰
(4)删除JSON中的数据
对于JSON对象结构，咱们使用delete关键字来删除JSON中的数据。
语法：
delete jsonObj.key;
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var obj =
{
"name":"小名",
"sex":"男",
"age":23,
"hobby":"dance",
}
}
delete obj.age;
if(obj.age==null)
{
alert("年龄项已经被删除！");
}
</script>
</head>
<body>
</body>
</html>
(5)遍历JSON对象
对于JSON对象结构，可使用for…in…循环来遍历JSON对象中的数据。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var obj =
{
"name":"小名",
"age":23,
"sex":"男",
}
for(var a in obj)
{
if(a=="name")
{
document.write("姓名是："+obj[a]);
}
}
</script>
</head>
<body>
</body>
</html>
弹出 姓名是：小名
1)JSON数组结构
JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。
语法：
var arr = [ { "键名1":值1, "键名2":值2 }, { "键名3":值3, "键名4":值4 }, …… ]
说明：
arr指的是json数组。数组结构是以“[”开始，到“]”结束
注意，这里的键名是字符串，可是值能够是数值、字符串、对象、数组或逻辑true和false。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var arr =
[
{
"name":"小光",
"age":23,
"sex":"男"
},
{
"name":"小红",
"age":21,
"sex":"女"
}
]
//读取JSON数据
document.write("第一个游客的名字是："+arr[0].name+"<br>");
document.write("第二个游客的性别是："+arr[1].sex+"<br>");
</script>
</head>
<body>
</body>
</html>
弹出 第一个游客的名字是：小光
第二个游客的性别是：女
3)json解析：将JSON字符串转换为JSON对象
eval()和parse()方法
因为eval方法不会检验join的格式是否正确，会把里面的一些JS方法也一并执行，因此很是危险，例如容易被指向而恶意网站，
-----不建议使用
JSON.parse()较好，会解析出错误。
//例子：首先定义了JSON字符串jsondata
eval()方法：
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'；
var jsonobj=veal('('+jsondata+')');
alert(jsonobj.staff[0].name);
parse()方法：
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'；
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
均可以，若把age后的70改为alert（123）；若用eval()方法，发现页面是先弹出123，再弹出洪七；也就是说用eval不只解析了字符串，还执行了JS里的方法
用parse（）解析字符串，发现会抛出一个错误。
这说明用eval()不会看json是否合法，eval很是危险。因此尽可能使用JSON.parse方法，来解析json里的字符串，并且还能够解析出json里的一些错误。
而JSON.parse在解释JSON时会检验JOIN的格式，若是格式不对，会报错，并且不会执行JSON里面的JS方法。咱们平时应该多用JOSN.parse，少用eval方法。
案例：
var people = {
"programmers": [{
"firstName": "Brett",
"lastName": "McLaughlin",
"email": "aaaa"
}, {
"firstName": "Jason",
"lastName": "Hunter",
"email": "bbbb"
}, {
"firstName": "Elliotte",
"lastName": "Harold",
"email": "cccc"
}],
"authors": [{
"firstName": "Isaac",
"lastName": "Asimov",
"genre": "sciencefiction"
}, {
"firstName": "Tad",
"lastName": "Williams",
"genre": "fantasy"
}, {
"firstName": "Frank",
"lastName": "Peretti",
"genre": "christianfiction"
}],
"musicians": [{
"firstName": "Eric",
"lastName": "Clapton",
"instrument": "guitar"
}, {
"firstName": "Sergei",
"lastName": "Rachmaninoff",
"instrument": "piano"
}]
};
要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：
people.programmers[0].lastName;
注意，数组索引是从零开始的。因此，这行代码首先访问 people变量中的数据；而后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName键的值。结果是字符串值 “McLaughlin”。
people.authors[1].genre // Value is "fantasy" people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't one people.programmers[2].firstName // Value is "Elliotte"
利用这样的语法，能够处理任何 JSON 格式的数据，而不须要使用任何额外的 JavaScript 工具包或 API。
资料：http://www.sojson.com/(在线检验JOSN语法是否正确)
参考资料：
Ajax全接触：http://www.imooc.com/learn/250
- 1. Ajax基础与Json应用(二）
- 2. Ajax基础原理与应用
- 3. jQuery与ajax 基础运用
- 4. Ajax与Json的基本使用
- 5. ajax基础一
- 6. AJAX基础（一）
- 7. JSON专题-Ajax中Json应用
- 8. AJAX基础（一）——AJAX简介
- 9. ajax与json
- 10. json 与 ajax
- 更多相关文章...
- • PHP - AJAX 与 PHP - PHP教程
- • ASP - AJAX 与 ASP - ASP 教程
- • Kotlin学习（一）基本语法
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Ajax基础与Json应用(二）
- 2. Ajax基础原理与应用
- 3. jQuery与ajax 基础运用
- 4. Ajax与Json的基本使用
- 5. ajax基础一
- 6. AJAX基础（一）
- 7. JSON专题-Ajax中Json应用
- 8. AJAX基础（一）——AJAX简介
- 9. ajax与json
- 10. json 与 ajax