AJAX 和 JSON

2022-03-15 09:00:59

JS AJAX

1. AJAX 简介

AJAX ( Asynchronous JavaScript And Xml ) 指的是一套综合了多项技术的浏览器端网页开发技术

Ajax 并非一门编程语言；其概念由杰西·詹姆斯·贾瑞特( Jesse James Garrett ) 提出

Ajax 组合了 浏览器内建的 XMLHttpRequest 对象( 从 web 服务器请求数据 ) 以及 JavaScript 和 HTML DOM (显示或使用数据)

Ajax 应用程序可能使用 XML 来传输数据；也可能使用纯文本或 JSON 文本传输数据

Ajax 可以通过与场景后面的 web 服务器交换数据来 异步更新网页；这意味着，网页可以在不重新加载整个页面前提下，实现网页中部分内容的更新

AJAX 如何工作

大致步骤：

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

2. XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象

Ajax 的核心是 XMLHttpRequest 对象

XMLHttpRequest 对象用于同幕后服务器交换数据；这意味着可以更新网页的部分，而不需要重新加载整个页面

创建 XMLHttpRequest 对象

// 语法
variable = new XMLHttpRequest( );

跨域访问

出于安全原因，现代浏览器不允许跨域访问

即尝试加载的网页和 XML 文件都必须位于 相同服务器上

XMLHttpRequest 对象属性和方法

属性：

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时(请求接收到应答)被调用的函数
readyState	保存 XMLHttpRequest 的状态（如下）
	0：请求未初始化
	1：服务器连接已建立
	2：请求已收到
	3：正在处理请求
	4：请求已完成且响应已就绪
responseText	以字符串形式返回响应数据
responseXML	以 XML 数据形式返回响应数据
status	返回请求的状态号（如下部分）
	200：“OK”
	403: “Forbidden”
	404: ”Not Found”
statusText	返回状态文本 (诸如 “OK” 或 “Not Found”)

方法：

方法	描述
abort( )	取消当前请求
getAllResponseHeaders( )	返回头部信息
getResponseHeader( )	返回特定的头部信息
open( method,url,async,user,psw)	规定请求；method: 请求类型 GET 或 POST；url: 文件位置
	async: true(异步) 或 false(同步)；user/psw: 用户名称/密码
send( )	将请求发送到服务器，用于 GET请求
send( string )	将请求发送到服务器，用于 POST 请求
setRequestHeader(header , value )	向请求添加 HTTP 头部（header：头部名称 ; value：头部值）

一条简单的 GET 请求

xhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xhttp.send();
// 用 GET 方法发送 Bill Gates 这条信息

一条简单的 POST 请求

xhttp.open("POST","ajax_test.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhttp.send("fname=Bill&lname=Gates");
// 用 POST 方法发送 Bill Gates 这条信息
// open( ) 方法的 url 参数，是服务器上文件的地址
// 该文件可以是任何类型，如.txt/.xml/.asp/.php等（在发送回响应之前在服务器执行操作）


**回调函数**

回调函数 是一种 **作为参数被传递到另一个函数的** **函数**

如果 网站中有多个 Ajax 任务，应创建 一个执行 XMLHttpRequest 对象的函数 以及 一个供每个 Ajax任务的回调函数（包含URL 以及 当响应就绪时调用的函数）

1. 示例

```js
loadDOC("url-1",myFunction1);
loadDOC("url-2",myFunction2);
function loadDoc(url,cFunction) {
    var xhttp;
    xhttp = new XMLHttpRequest( );
    xhttp.onreadystatechange = function( ) {
        if (this.readyState == 4 && this.status == 200 ) {
            cFunction( this) ;
        }
    };
    xhttp.open("GET",url,true);
    xhttp.send( );
}
function myFunction1(xhttp) {
    // action goes here
}
function myFunction2(xhttp) {
    // action goes here
}

3. AJAX 与 XML 交互

示例解释：

? 当用户点击 “获取 CD 信息”按钮时，执行 loadDoc( ) 函数

? loadDoc( ) 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求

? 当服务器响应就绪后，构建HTML表格，从 XML 文件提取节点(因素)

? 最后使用由XML 数据填充的 HTML表格对元素 “demo” 进行更新

示例代码

function loadDoc( ) {
    var xhttp = new XMLHttpRequest( );
    	xhttp.onreadystatechange = function( ) {
            if ( this.readyState == 4 && this.status == 200 ) {
                myFunciton(this);
            }
        };
}
function myFunction(xml) {
    var i ;
    var xmlDoc = xml.responseXML;
    var table = "<tr><th>艺术家</th><th>曲目</th></tr>";
    var x = xmlDoc.getElementsByTagName("TRACK");
    	for( i = 0 ; i < x.length ; i ++ ) {
            table += "<tr><td>" +
            x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
        	"</td><td>" + 
            x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
            "</td></tr>";
        }
    document.getElementById("demo").innerHTML = table;
}

4. AJAX 与 php/asp 交互

示例解释：

? 在上面的例子中，当用户在输入字段中键入字符时，会执行名为 “showHint( ) ” 的函数

? 此函数被 onkeyup 事件触发（某个键盘按键被松开）

示例代码

<html>
    <head>
        <script>
        	function showHint(str){
                if (str.length == 0) {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                } else {
                    
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadyStatechange = function ( ) {
                        if (this.readyState == 4 && this.status == 200 ) {
                            document.getElementById("txtHint").innerHTML = this.responseText;
                        }
                    };
                    xmlhttp.open("GET", "gethint.php?q=" + str ,true);
                    xmlhttp.send( );
                }
            }
        </script>
    </head>
    <body>
        <p><b>请在下面的输入字段中键入姓名：</b></p>
        <form>
        	姓名：<input type = "text" onkeyup = "showHint(this.value)">
        </form>
        <p>建议：<span id = "txtHint"></span></p>
    </body>
</html>

// gethint.php 文件检查姓名数组，然后向浏览器返回对应的姓名：
<?php
// 姓名数组
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";

// 从 URL 获取 q 参数
$q = $_REQUEST["q"];

$hint = "";

// 查看数组中所有 hint，$q 是否与 "" 相同
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
         }
    }
}

// 输出 "no suggestion"，如果未找到 hint 或输出正确的值
  echo $hint === "" ? "no suggestion" : $hint;
?>

‘gethint.asp 文件检查姓名数组，然后向浏览器返回对应的姓名‘
<%
 response.expires=-1
 dim a(32)
 ‘用姓名填充数组
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"

 ‘从 URL 获取 q 参数
 q=ucase(request.querystring("q"))

 ‘查看数组中所有 hint，q 的长度是否大于 0
 if len(q)>0 then
   hint=""
   for i=1 to 30
     if q=ucase(mid(a(i),1,len(q))) then
       if hint="" then
         hint=a(i)
       else
         hint=hint & " , " & a(i)
       end if
     end if
   next
 end if

 ‘如果未找到 hint，输出 "no suggestion"，或输出正确的值
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>

5. AJAX 与数据库交互

当用户在上面的下拉列表中选择一位客户后，执行名为“ showCustomer( )” 函数

此函数被 onchange 事件触发：

示例

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState  == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML  = this.responseText;
    }
  };
  xhttp.open("GET",  "getcustomer.asp?q=" + str, true);
  xhttp.send();
} 
// showCustomer( ) 函数执行逻辑如下：
// 1. 检查是否选取客户
// 2. 创建 XMLHttpRequest 对象
// 3. 创建当服务器响应就绪时执行的函数
// 4. 向服务器上的文件发送请求
// *  请注意，参数q 被添加到URL (带有下拉列表的内容)

‘getcustomer.asp 中的源代码中运行米面向数据库的查询，并在HTML表格中返回结果‘
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "‘" & request.querystring("q") & "‘"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("customers.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
 for each x in rs.Fields
   response.write("<tr><td><b>" & x.name & "</b></td>")
   response.write("<td>" & x.value & "</td></tr>")
 next
 rs.MoveNext
loop
response.write("</table>")
%>

JS JSON

1. JSON 简介

JSON（ JavaScript Object Notation） JavaScript对象标记法；最初由 Douglas Crockford 提出

JSON 属于文本（文本可被任何编程语言作为数据来读取和使用），是一种存储和交换数据的语法

JSON 是一种轻量级的数据交换格式；独立于语言；且具有自我描述、易于理解的特点

JSON 文件的文件类型是 “.json”

JSON 文本的 MIME ( Mulitpurpose Internet Mail Extensions 媒体类型 ) 类型是 “application/json”

（MIME 类型又称互联网媒体类型，是一种标准；用来表示文档、文件或字节流的性质和格式）

1. 为什么使用 JSON ？

因为 JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式

JavaScript 提供内建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象

语法

JSON.parse( );          // JSON →→→ JavaScript
JSON.stringify( );     //  JavaScript →→→ JSON

因此，从服务器以 JSON 接收到的数据，可以像任何其它 JavaScript 对象那样使用它

2. 发送数据

若数据存储在 JavaScript 对象中，应把对象转换为 JSON ,然后将其发送到服务器

示例代码

var myObj = { name:"Bill Gates",age:62,city:"Seattle"};
var myJSON = JSON.stringify(Obj);
window.location = "demo_json.php?x=" + myJSON;

// 通过 JSON.stringify( ) 把 JavaScript 对象转换为字符串

// 通过 JSON.stringify( ) 把 数组转换为字符串
var arr = ["Bill Gates","Steve Jobs","Elon Musk"];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

// 通过 JSON.stringify 把 日期字符串化
var obj = {"name":"Bill Gates", "today":new Date( ),"city":"Seattle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON
// 返回 {"name":"Bill Gates","today":"2021-01-31T02:56:12.709Z","city":"Seattle"}

3. 接收数据

若以 JSON 格式接收到数据，可将其转换为原生的 JavaScript 对象

示例代码

var myJSON = ‘{ "name":"Bill Gates","age":62,"city":"Seattle"}‘;
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

//　通过　JSON.parse( ) 解析从服务器接收到的数据字符串


//　使用 AJAX 请求从服务器 请求JSON 
var xmlhttp = new XMLHttpRequest( );
xmlhttp.onreadystatechange = function( ) {
    if ( this.readyState == 4 && this.status == 200 ) {
        myObj = JSON.parse( this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open( "GET","json_demo.txt",true);
xmlhttp.send( );

// 在 对衍生自数组的 JSON 使用  JSON.parse( )后，此方法返回 JavaScript 数组，而非对象
var xmlhttp = new XMLHttpRequest( );
xmlhttp.onreadystatechange = function( ) {
    if ( this.readyState == 4 && this.status == 200 ) {
        myArr = JSON.parse( this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open( "GET","json_demo_array.txt",true);
xmlhttp.send( );

4. 存储数据

在存储数据时，数据必须是某种具体的格式

并且无论您选择在何处存储它，文本永远是合法格式之一

JSON 让 JavaScript 对象存储为文本成为可能！

代码示例

// 存储数据
myObj = {name: "Bill Gates",age: 62,city: "Seattle"};
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON",myJSON);

// 接收数据
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

2. JSON 语法

JSON 语法衍生于 JavaScript 对象标记的语法

数据在名称 / 值对中
数据由逗号分隔
花括号容纳对象
方括号容纳数组

1. JSON 数据

JSON 数据写为名称/值对；名称/值对由字段名称构成，后跟冒号和值

JSON 名称需要双引号，而 JavaScript 名称不需要

示例代码

// 在 JSON 中， 键 必须是字符串，由双引号包围
{"name":"Bill Gates"};

// 在 JavaScript中，键 可以是字符串、数字或标识符名称
{name: "Bill Gates"}

2. JSON 值

在 JSON 中，值必须是以下 数据类型 之一

字符串
数字
对象（ JSON对象）
数组
布尔
null

在 JavaScript 中，以上所列均可为值，外加其它有效地 JavaScript 表达式，包括：

函数
日期
undefined

在 JSON 中，字符串必须用双引号编写；而在 JavaScript 中可使用双引号/单引号的字符串值

3. JSON vs XML

JSON 和 XML 均可用于从 web服务器接收数据

示例代码

// json 定义 一个由3个雇员构成的 雇员对象

{"employees":[
    {"firstName":"Bill","lastName":"Gates"},
    {"firstName":"Steve","lastName":"Jobs"},
    {"firstName":"Elon","lastName":"Musk"}
]}

<!-- xml 定义 一个由3个雇员构成的 雇员对象-->

<employees>
    <employee>
        <firstName>Bill</firstName>
        <lastName>Gates</lastName>
    </employee>
    <employee>
    	<firstName>Steve</firstName>
        <lastName>Jobs</lastName>
    </employee>
    <employee>
    	<firstName>Elon</firstName>
        <lastName>Musk</lastName>
    </employee>
</employees>

JSON 与 XML 相同点

JSON 和 XML 都是 “自描述的” (具有可读性)
JSON 和 XML 都是分级的 (值中有值)
JSON 和 XML 都能被大量编程语言解析和使用
JSON 和 XML 都能被 XMLHttpRequest 读取

JSON 与 XLM 的差异

JSON 不使用标签
JSON 代码更短
JSON 的读写速度更快
JSON 可使用数组
XML 必须使用 XML 解析器进行解析；而 JSON 可通过标准的 JavaScript 函数进行解析

JSON 相对于 XML 的优势

XML 比 JSON 更难解析
JSON 被解析为可供使用的 JavaScript 对象
对于 AJAX 应用程序，JSON 比 XML 更快更易用
- 使用 XML
  - 读取 XML 文档
  - 使用 XML DOM 遍历文档
  - 提取变量中存储的值
- 使用 JSON
  - 直接读取 JSON 字符串
  - JSON.parse 直接解析 JSON 字符串

4. JSON 对象

JSON 对象的大多语法都跟 JavaScript 一致

访问对象值

myObj = {"name":"Bill Gates","age":62,"car":null};
x = myObj.name;
x = myObj["name"];
// 可以通过(.)或([])来访问对象值

遍历对象

myObj = {"name":"Bill Gates","age":62,"car":null};
for ( x in myObj ) {
    document.getElementById("demo").innerHTML += myObj[x] ;
}
// 可以通过 for-in 遍历对象属性;请使用括号标记法 myObj[x]

嵌套 JSON 对象

myObj = {
    "name":"Bill Gates",
    "age":62,
    "cars":{
        "car1":"Porsche",
        "car2":"BWM",
        "car3":"Volvo"
    }
}
x = myObj.cars.car2;
x = myObj.cars["car2"];
// 通过(.)或([]) 访问嵌套的JSON对象属性

myObj.cars.car3 = "Mercedes Benz";
myObj.cars.["car3"] = "Mercedes Benz";
// 通过(.)或([]) 修改JSON嵌套对象中的值

delete myObj.cars.car1;
// 通过 delete 关键词 来删除 JSON嵌套对象的属性

5. JSON 数组

JSON 中的数组几乎与 JavaScript 中的数组相同

访问数组值

var arr = {
    "name":"Bill Gates",
    "age":62,
    "car":["Porsche","BWM","Volvo"]
	}

x = arr.car[0];
// 通过 索引来访问 数组的元素值

遍历数组

 for ( i = 0 ; i < arr.length ; i ++) {
     var x += myObj.cars[i];
 } 
// 通过 for 循环遍历数组

嵌套数组

var arrs = {
    "name":"Bill Gates",
    "age":62,
    "cars":[
       		{"name":"Porsche","models":["911","Taycan"]},
        	{"name":"M5","models":["M5","M3","X5"]},
        	{"name":"Volvo","models":["XC60","V60"]}
   	]
}
// 数组中的值 可以是另一个数组；甚至可以是另一个 JSON 对象

// 访问数组内的数组，应对 每个数组分别使用 for-in 循环
var i,x,j;
for( i in arrs.cars) {
    x += "<h1>" + arrs.cars[i].name + "</h1>";
	for ( j in arrs.cars[i].models ) {
        x += arrs.cars[i].models[j];
    }
}
// 通过 索引号来修改数组元素值
arrs.cars[1] = "Mercedes Benz";

// 通过 delete 关键词来删除数组中的项目
delete arrs.cars[2];

6. JSON PHP

JSON 的常规用途是从 web 服务器读取数据，然后在网页中显示这些数据

那么，如何在客户端与 PHP 服务器之间交换 JSON 数据？

1.1 服务器端 PHP 文件

PHP 提供处理 JSON 的内建函数

通过使用 PHP 函数 json_encode( ) ，PHP 中的对象可转换为 JSON

<?php
    $myObj->name = "Bill Gates";
	$myObj->age = 62;
	$myObj->city = "Seattle";

	$myJSON = json_encode($myObj);
	
	echo $myJSON;
    ?>

1.2 客户端 JavaScript

客户端上的 JavaScript ，使用 AJAX 调用来请求上例的 PHP 文件

使用 JSON.parse( ) 把结果转换为 JavaScript 对象

var xmlhttp = new XMLHttpRequest( );
xmlhttp.onreadystatechange = function ( ) {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET","demo_file.php",true);
xmlhttp.send( );

2.1 PHP 数组

在使用 PHP 函数 json_encode( ) 时， PHP 中的数组也将被转换为 JSON

示例代码

<?php
    $myArr = array("Bill Gates","Steve Jobs","Elon Musk");
	$myJSON = json_encode($myArr);
	echo $myJSON;
    ?>

2.2 客户端 JavaScript

示例代码

var xmlhttp = new XMLHttpRequest( );
xmlhttp.onreadystatechange = function ( ) {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj[2];
    }
};
xmlhttp.open("GET","demo_file_array.php",true);
xmlhttp.send( );

3. 演示查询数据库

PHP 是服务器端编程语言，应该用于只能由服务器执行的操作，比如访问数据库

问题：

假设服务器上有一个数据库，包含客户、产品和供应商数据

此刻，您需要请求服务器来获取 “客户” 表中前10条数据记录

3.1 发送请求

使用 JSON.stringify( ) 将 JavaScript 对象转换为 JSON

var obj,dbParam,xmlhttp;
obj = {"table":"customer","limit":10};
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest( );
xmlhttp.onreadystatechange = function( ) {
    if(this.readyState == 4 && this.status == 200 ) {
        document.getElementById("demo").innerHTML = this. responseText;
    }
};
xmlhttp.open("POST","demo_json_db.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

// 代码解释：
// 定义包含 table 属性  和 limit 属性的 对象 obj
// 将这个对象 转换为 JSON 字符串
// 向这个 PHP 文件发送请求，其中 JSON 作为参数 demo_json_db.php
// 等待直到请求返回结果(作为 JSON)
// 显示 从 PHP 文件接收到的结果

// 需要注意的是：
// 在向服务器发送数据时，通常最好是使用 HTTP POST 方法
// 若用 POST 方法 来发送 AJAX 请求，需要指定该方法和正确的头部
// 发送到服务器的数据现在必须是 .send( )方法的参数

3.2 PHP 文件

demo_json_db.php 文件

<?php
    header("Centent-Type:application/json:cahrset = UTF-8");
	$obj = json_decode($_POST["x"],false);

	$conn = new mysqli("mySever","myUser","myPassword","Northwind");
	$result = $conn->query("SELECT name FROM ".$obj->table."LIMT".$obj->$limit);
	$outp = array( );
	$outp = $result->fetch_all(MYSQLI_ASSOC);
	echo json_encode($outp);
    ?>
// 将请求 转换为 对象，使用 PHP 函数 json_decode( )
// 访问数据库，用所请求的数据填充数组
// 把数组添加对象，使用 json_encode( ) 函数以 JSON 返回该对象

3.3 遍历结果

把从 PHP 文件接收到的结果转换为 JavaScript 对象；本例中，为一个 JavaScript 数组

...
var x ,txt = "",myObj;
xmlhttp.onreadystatechange = function ( ) {
    if(this.readyState == 4 && this.status == 200 ) {
        myObj = JSON.parse(this.responseText);
        for( x in myObj) {
            txt += myObj[x].name +"<br>";
        }
        document.getElementById("demo").innerHTML = txt;
    }
};
...

3.4 整合结果

代码示例

<script>
var xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    for (x in myObj) {
      txt += myObj[x].CustomerId + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("POST", "/demo/demo_json_db.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
</script>

3. JSONP

JSONP ( JSON with Padding ) 是一种无需考虑跨域问题即可传送 JSON 数据的方法

从另一个域请求文件会引起问题，由于跨域政策

从另一个域请求外部脚本没有这个问题

JSONP 不使用 XMLHttpRquest 对象；使用 <script> 标签取而代之

语法

<script src = documentName.php>

待续……

AJAX 和 JSON

码农公寓

JS AJAX

1. AJAX 简介

2. XMLHttpRequest 对象

3. AJAX 与 XML 交互

4. AJAX 与 php/asp 交互

5. AJAX 与 数据库 交互

JS JSON

1. JSON 简介

1. 为什么使用 JSON ？

2. 发送数据

3. 接收数据

4. 存储数据

2. JSON 语法

1. JSON 数据

2. JSON 值

3. JSON vs XML

4. JSON 对象

5. JSON 数组

6. JSON PHP

1.1 服务器端 PHP 文件

1.2 客户端 JavaScript

2.1 PHP 数组

2.2 客户端 JavaScript

3. 演示 查询 数据库

3.1 发送请求

3.2 PHP 文件

3.3 遍历结果

3.4 整合结果

3. JSONP

相关文章

5. AJAX 与数据库交互

3. 演示查询数据库