AJAX与JSON简单学习:

最新推荐文章于 2022-05-06 17:27:33 发布

暮w光

最新推荐文章于 2022-05-06 17:27:33 发布

阅读量190

点赞数

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

本文链接：https://blog.csdn.net/qi_SJQ_/article/details/119940056

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、AJAX：

1.应用：

在这里插入图片描述

2.概念：

ajax概念已在jquery中学习，AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

3.实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

4.创建对象：

XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest对象用于和服务器交换数据。

XMLHttpRequest 对象：

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本使用 ActiveX 对象语法：

variable=new ActiveXObject(“Microsoft.XMLHTTP”);

验证是否支持XMLHttpRequest 对象：

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

5.请求：

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open(“GET”,“ajax_info.txt”,true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型，GET 或 POS；Turl：文件在服务器上的位置；async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

异步 - True 或 False？

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。
AJAX出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

1)Async=true：

请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)//事件4次触发状态为200 ok。
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

2）Async = false：

当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可。

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

6.响应：

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
在这里插入图片描述
参考：https://www.runoob.com/ajax/ajax-xmlhttprequest-response.html

7.就绪状态（readyState）：

onreadystatechange 事件：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的三个属性：
在这里插入图片描述

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)//xmlhttp.readyState==4 && xmlhttp.status==200的解释：请求完成并且成功返回
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

PS:
1)xmlhttp.status的值及解释：
区别于http状态码，可以参考：https://www.runoob.com/http/http-status-codes.html

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

即：
1xx:信息响应类，表示接收到请求并且继续处理

2xx:处理成功响应类，表示动作被成功接收、理解和接受

3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理

4xx:客户端错误，客户请求包含语法错误或者是不能正确执行

5xx:服务端错误，服务器不能正确执行一个正确的请求

2)xmlhttp.readyState的值及解释：

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

8.AJAX与PHP/ASP：

showHint() 函数

https://www.runoob.com/ajax/ajax-asp-php.html

9.AJAX与数据库：

showCustomer()函数

https://www.runoob.com/ajax/ajax-database.html

10.AJAX与XML:

loadXMLDoc() 函数

https://www.runoob.com/ajax/ajax-xmlfile.html

二、JSON:

1.概念：

JSON: JavaScript Object Notation(JavaScript 对象表示法)。JSON 是轻量级的文本数据交换格式。

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON - 转换为 JavaScript 对象。
在这里插入图片描述

在这里插入图片描述

2.实例：

<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
网站 slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
    "name":"菜鸟教程",
    "url":"www.runoob.com", 
    "slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
 
</body>

3.语法：

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

json的值可以使数组，对象和null。

在这里插入图片描述

4.JSON VS XML:

XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

https://www.runoob.com/json/json-vs-xml.html

5.JSON对象：

1）访问对象值
你可以使用点号（.）来访问对象的值，
你也可以使用中括号（[]）来访问对象的值：

<body>

<p>你可以使用点号（.）来访问 JSON 对象的值：</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;     //x = myObj["name"];
document.getElementById("demo").innerHTML = x;

</script>

</body>

2）
for-in 来循环对象的属性和访问属性的值。

3）嵌套 JSON 对象：对象里包含对象。
访问就需要两个点或中括号组合。

4）修改值：

myObj.sites["site1"] = "www.google.com";//这是修改的是嵌套对象的值

5）删除对象属性：
delete 关键字：

delete myObj.sites.site1;//也可用中括号

6.数组：

数组作为 JSON 对象！

属性的值可以使数组：

var myObj ={
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

访问：

var x = myObj.sites[0];

for-in循环访问数组。

嵌套 JSON 对象中的数组：JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

<body>

<p>循环内嵌数组：</p>

<p id="demo"></p>

<script>

var myObj, i, j, x = "";
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>";
    }
}

document.getElementById("demo").innerHTML = x;

</script>

</body>

同对象一样，可以修改数组值和删除数组元素。

https://www.runoob.com/w3cnote/js-delete-json-arr.html

7.JSON.parse()：

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
不建议在 JSON 中使用函数。

语法及使用和异常请移步:
https://www.runoob.com/json/json-stringify.html

PS：(我好像搬运工~~~ (￣△￣；) )

8.JSON.stringify()：

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

移步：https://www.runoob.com/json/json-stringify.html

9.eval()函数与json解析器：

JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。多数情况下是从服务器上读取json文件。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + “)”);

<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
网站名: <span id="name"></span><br> 
网站地址: <span id="url"></span><br> 
</p> 
<script>
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url 
</script>
</body>

在这里插入图片描述

10.Jsonp：

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。—与安全息息相关。

https://www.runoob.com/json/json-jsonp.html

php与json：https://www.runoob.com/php/php-json.html

暮w光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX与JSON简单学习:

一、AJAX：1.应用：2.概念：ajax概念已在jquery中学习，AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面3.实例：<!DOCTYPE html><html><head><meta charset="utf-8"><scri
复制链接

扫一扫

专栏目录