JSON+AJAX

最新推荐文章于 2023-09-25 14:11:14 发布

某僧

最新推荐文章于 2023-09-25 14:11:14 发布

阅读量286

点赞数

原文链接：https://www.runoob.com/ajax/ajax-tutorial.html

版权

关键词由CSDN通过智能技术生成

学习路线：

W3C
HTML5
JavaScript
jQuary ：JS框架
NodeJS/Python/C++/Golang/Node（前端）
MVVM框架：Vue/React/Webpack（前端）
DOM
1. HTML DOM
2. XML DOM
XML1.1
SOAP
WSDL
SVG
D3
PHP
JSON 、AJAX 绝配二人组 √
PHP、正则表达式（前端）

JSON

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，我终于写到JSON了，哭辽~ _ ~
JSON ：JavaScript Object Notation(JavaScript 对象表示法)，是一种轻量级的数据交换格式（与XML相比，更短，读写速度更快，是纯文本），独立于语言（很多语言都可以解析json文本）。JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

//json
{
    "sites": [
        { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
        { "name":"google" , "url":"www.google.com" }, 
        { "name":"微博" , "url":"www.weibo.com" }
    ]
}
//js创建对象数组
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

键的书写同样都需要引号，json中key必须是字符串，value是合法的json数据类型格式。

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
JSON 语法规则。数据为键/值对，键和值之间使用冒号。数据由逗号分隔（对象之间，以及键值对之间）。大括号保存对象，方括号保存数组（对象数组），当没有多个对象时直接使用{}，不再需要方括号。总而言之，json定义对象数组，即包含一个或多个对象的数组。对象中还可以包括对象。

//对象包含对象实例，及访问
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];

可以使用 . 进行访问，即：对象[index].名称（当数组内为一个对象时，语法为：对象.键名称）;还可以通过键名称进行访问，即：对象[“键”]；可以通过下标、key进行赋值。删除为delete，即delete 对象.key,或对象[“key”] ，delete仅删除键值对，空间仍会保留。

//使用for/in循环访问
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
//此处只访问key
    document.getElementById("demo").innerHTML += x + "<br>";
}
//此处访问value
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

JSON 值可以是：
a、数字（整数或浮点数）
b、字符串（在双引号中）
c、逻辑值（true 或 false）
d、数组（数组中可以包含undefined、function、date型数据）可以使用索引值进行访问（object.key[index]）,可以循环访问数组中的每一个数据，数组内容必须写在中括号中，使用逗号隔开
e、对象（在大括号中）
f、null
（不含有JS中的undefined、symbol、function、date，JSON 不能存储 Date 对象，需要存储 Date 对象，需要先将其转换为字符串，之后再将字符串转换为 Date 对象。JSON 不允许包含函数，但可以将函数作为字符串存储，之后再将字符串转换为函数。）
键必须是字符串，使用引号包围。
以下示例为一个对象中又包含对象，并且内层对象包含数组的情况：

myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}
for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

parse和stringify方法为反向

方法	描述
JSON.parse(text[, reviver])	用于将一个 JSON 字符串转换为 JavaScript 对象，解析完成后就可以使用数据了。处理接收的服务器传来的数据时，方括号内为可选内容，是一个函数，用于将value格式进行转换
JSON.stringify(value[, replacer[, space]])	用于将 JavaScript 值转换为 JSON 字符串。在向服务器发送数据时使用。会将时间转化为字符串，将函数键值对直接删除（可以先使用toString()方法将方法转化为字符串，再进行stringify）
eval()	内建函数，eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误

一个eval的示例

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");//加（）后函数本身不带有括号，还是原来的样子
 //在alexa 函数的最后加()转化为自调用函数
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

AJAX

超级简单的AJAX来啦~

在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（传统网页如需更新内容，需要重载整个页面）AJAX 是一种用于创建快速动态网页的技术。

工作流程
XMLHttpRequest 对象 (在后台异步的与服务器交换数据，实现更新部分网页内容的功能)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
步骤一：创建XMLHttpRequest 对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

步骤二：向服务器发送请求

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型，GET 或 POST，post具有较强的健壮性，但get更简单更快。url：文件在服务器上的位置。async：true（异步）或 false（同步），推荐异步，极少量数据使用同步。
send(string)	将请求发送到服务器。string：仅用于 POST 请求

语法：

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

示例：

//示例1
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
//示例2
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
//示例3
//向服务器发送信息
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
//示例4
//将数据组装成表单形式发送，向请求添加HTTP头，header: 规定头的名称，value: 规定头的值
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

步骤三：获得服务器响应
两种方式：responseText（获得字符串形式的响应数据）responseXML（获得 XML 形式的响应数据，需要特殊处理）

//XML文件处理方式
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

XML实例

<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

附加解释说明
每当 readyState（存有 XMLHttpRequest 的状态信息，0: 请求未初始化；1: 服务器连接已建立； 2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪）改变时，就会触发onreadystatechange 事件。status（状态，200: “OK”；404: 未找到页面）为200时进行信息显示。onreadystatechange 事件会被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
使用详情

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

7.回调函数（使用Java基础解释就是抽象函数）

//回调函数为loadXMLDoc
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
	if (window.XMLHttpRequest)
 	{
 		// IE7+, Firefox, Chrome, Opera, Safari 代码
 		 xmlhttp=new XMLHttpRequest();
 	 }
	else
	{// IE6, IE5 代码
 		 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}
function myFunction()
{
	 loadXMLDoc("/try/ajax/ajax_info.txt",function()
	 {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		  {
		        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 		 }
 	});
}
</script>

最终示例

responseText版

function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

reponsexml版

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    	myFunction(this);//此处this为xhttp 
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  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;
}

完结~