Ajax和Json

最新推荐文章于 2024-04-09 10:00:00 发布

隐身的菜鸟

最新推荐文章于 2024-04-09 10:00:00 发布

阅读量927

点赞数

分类专栏：笔记文章标签： json

本文链接：https://blog.csdn.net/m0_62063669/article/details/126107303

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Asynchronous(异步) Javascript And XML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。

Ajax

同步请求和异步请求

同步请求是指当浏览器发出请求后，只有当服务器端完成后响应回来，才能看到响应结果，这个过程中浏览器不能做其他的事情，只能等待服务端的响应。

异步请求是指当浏览器发出请求后，等待服务器的响应在此期间，浏览器不阻塞，你可以去做其他的事情，直到服务端的响应结束。

同步请求，就是整个浏览器的页面都会刷新一次

异步请求，就是局部刷新，它不会整体刷新页面（浏览器开启一个新的线程去发生请求服务端，主线程不受影响，直到这个异步线程从服务端响应回来，然后，主线程就要针对这个回来的响应进行处理）

Ajax的对象

XMLHttpRequest对象，专门用来发送异步请求的对象，当然，也可以发达同步请求。

Ajax代码编写步骤

1.创建XMLHttpRequest对象

2.注册回调函数

3.建立与服务端的连接

4.发送请求

var xmlhttp;  //创建变量
function ajax_demo() {
//第一步
    if(window.XMLHttpRquest) {
    //IE7+,FF,chrome,opera,safari,.....
        xmlhttp=new XMLHttpRquest();
    }
    else{
    //IE5,IE6,else基本不用了，只需要if里的那一句话就可以了
        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
    }
//第二步,注册回调函数
    xmlhttp.onreadystatechange=function() {  
    //当readyState改变一次就回调一次，只有当readyState的值变为4的时候，才去处理，其他的    
    情况不管
    //执行你的异步的代码逻辑
    //......自己要写的代码
        if(xmlhttp.readState==4){
            //......
            if(xmlhttp.status==200){
                //表示服务端正常响应客户端
                var str=xmlhttp.responseText;
            //如果服务端传递过来的是json字符串，则我们可以通过如下方式把它解析成JSON对象
                var json=JSON.parse(str);
            }
        }
    }
//第三步，建立连接
    xmlhttp.open("POST|GET","目标URL"，true|false)；//true表示异步，false表示同步
//第四步，发送请求
    xmlhttp.send(); //如果要传递数据给服务端，把数据作为参数传过去
}

XMLHttpRequest对象的属性

1.readyState属性(此属性0-4，共计5种状态)

        0 表示请求未初始化

        1 服务器连接已经建立

        2 请求已接收

        3 请求处理中

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

2.status属性(响应状态码，有5种类型)

        1xx

        2xx 代表服务端正常响应的客户端

        3xx 代表服务端资源没有发送改变

        4xx 表示资源错误

        5xx 表示服务端错误

3.responseText和responseXML

        responseText 表示以文本的信息获取服务端的响应，获取的就是字符串

        responseXML 当服务端以XML格式返回给客户端时，则使用此属性去接收，

                                （获取的就是DOM对象）

Ajax案例

前端

//定义xmlhttp变量
var xmlhttp;
//给username输入框添加onblur事件处理程序
var uname_input=document.querySelector("input[name='username']");
uname_input.onblur=function(){
	//1.初始化，XMLHttpRequest对象
	initXHR();
	//2.注册回调函数
	xmlhttp.onreadystatechange=function(){
		//处理逻辑
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			//a.获取服务端的响应
			var resp=xmlhttp.responseText;
			//b.判断
			if(resp=="true") {
				//说明这个用户已经存在了
				document.querySelector("#uname-show").innerHTML="用户名已经存在"；
				//把光标定位到此元素
				uname_input.focus();
				//选中
				uname_input.selected();
			}else{
				//说明这个用户可以使用
				document.querySelector("#uname-show").innerHTML="用户名合法"；
				//修改样式
				document.querySelector("#uname-show").className="text-success"；
			}
		}
	}
	//3.建立连接
	xmlhttp.open("GET","ajax/validateName?username="+uname_input.value,true);
	//4.发起请求
	xmlhttp.send();
}

服务端

Json

在JavaScript中创建Json对象

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
		姓：<span id="x01"></span><br>
		名：<span id="m01"></span>
	</div>
	<script type="text/javascript">
		var ren={"xing":"马","ming":"群耀"};
		document.getElementById("x01").innerHTML=ren.xing;
		document.getElementById("m01").innerHTML=ren.ming;
	</script>
</body>
</html>

Json语法

Json语法规则(Json语法是JavaScript对象表示语法的子集)

        数据在名称/值对中

        数据由逗号分隔

        花括号保存对象

        方括号保存数组

Json名称/值对

        Json数据格式为：名称/值对，"firstName":"John"

        相当于JavaScript中的：firstName="John"

Json值

Json对象(在花括号里书写，对象可以包含多个名称/值对)

        {"firstName":"John","lastName":"Doe"}

Json数组(在方括号里书写，数组可包含多个对象)

字符串与对象相互转换

访问对象值

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
		姓：<span id="x01"></span><br>
		名：<span id="m01"></span><br>
		地址：<span id="di"></span>
	</div>
	<div id="demo"></div>
	<script type="text/javascript">
		var ren={"xing":"马","ming":"群耀","dizhi":"泰兰德"};
		// document.getElementById("x01").innerHTML=ren.xing;
		// document.getElementById("m01").innerHTML=ren.ming;
		// document.getElementById("di").innerHTML=ren.dizhi;

		for(i in ren){
			document.getElementById("demo").innerHTML=document.getElementById("demo").innerHTML+ren[i]+"<br>";
		}
	</script>
	</script>
</body>
</html>

嵌套Json对象

修改删除值

改前和改后

Json数组

Json和XML

XML 被设计用来传输和存储数据。HTML 被设计用来显示数据。

Json相比XML的优势是：

        没有结束标签，长度更短，读写更快

        能够直接被JavaScript解释器解析

        可以使用数组

下面写的，两者表达的内容是一致的

Json与XML相互转换

XML转Json

Json转XML

Ajax和Json

Json文件被放置在服务器端，客户端请求该文件用得最多的就是Ajax，能够实现异步请求。

Ajax能够与服务器交换少量数据，从而异步地更新部分网页。

GeoJSON和TopoJSON

GeoJSON和TopoJSON 是符合JSON语法规则的两种数据格式，用于表示地理信息

1.GeoJSON

GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON不是一种新的格式，其语法规范是符合 JSON格式的，只不过对其名称进行了规范，专门用于表示地理信息

GeoJSON的最外层是一个单独的对象（object）。这个对象可表示：

        -几何体（Geometry）。
        -特征（Feature）。
        -特征集合（FeatureCollection）。

最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type属性，表示对象的类型，type 的值必须是下面之一。

        -Point：点。
        - MultiPoint：多点。
        - LineString：线。
        -MultiLineString：多线。
        - Polygon：面。
        - MultiPolygon：多面。
        -GeometryCollection：几何体集合。
        - Feature：特征。
        - FeatureCollection：特征集合。

2.TopoJSON

TopoJSON 是 GeoJSON 按拓扑学编码后的扩展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point之类的几何体来表示图形的方法，TopoJSON中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的。

        -TopoJSON 消除了冗余，文件大小缩小了80％，因为：

        -边界线只记录一次（例如广西和广东的交界线只记录一次）。地理坐标使用整数，不

        使用浮点数。

http://geojson.io

http://mapshaper.org

隐身的菜鸟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax和Json

Asynchronous(异步)JavascriptAndXML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。Json语法规则(Json语法是JavaScript对象表示语法的子集) 数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组Json名称/值对 Json数据格式为：名称/值对，"firstName":"John" 相
复制链接

扫一扫