Json和AJAX总结

Json

什么是json

json的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式。
							负责不同编程语言中的数据传递和交互。

json的语法格式

• 数组（Array）用方括号(“[]”)表示。
• 对象（0bject）用大括号(“{}”)表示。
• 名称/值对(name/value）组合成数组和对象。
• 名称(name）置于双引号中
• 并列的数据之间用逗号(“,”）分隔
• 值（value）有字符串、数值、布尔值、null、对象和数组。

注：json的格式与js中对象（object）的格式很像。
		但是json是基于ECMAScript语法，但这并不意味着json必须在js中使用，只是因为语法相似

JSON 数组：{
			"employees": [
					{ "firstName":"John" , "lastName":"Doe" }, 
					{ "firstName":"Anna" , "lastName":"Smith" }, 
					{ "firstName":"Peter" , "lastName":"Jones" }
						]
		}

json和XML的区别

XML格式:                          json数据格式：
<root>                                        {
	<name>老松 </name>                       "name":"老松",
	<age>108</age>                            "age":108,         
	<fruits>apple</fruits>                    "fruits":["apple","pear"]
	<fruits>pear</fruits>                    }		                  
</root>                                

xml:即可扩展标记语言,用于数据存储和传输，它可以跨越互联网任何的平台，不受编程语言和操作系统的限制。
json数据：没有结束标签,长度更短,读写更快，能够直接被JavaScript解释器解析，可以使用数组

json数据方法（对象和字符串转换）

字符串转对象 JSON.parse()

var jSon='{"name":"老松","age":"108"}';
console.log(JSON.parse(jSon));

对象转字符串 JSON.stringify()

var jSon={
	"name":"老松",
	"age":"108"
	};
console.log(JSON.stringify(jSon))
//JSON.stringify(参数一，参数二，参数三)
//JSON.stringify(jSon,["name"],4)
//参数一：对象名
//参数二：数组中放要提取的数据可为多个
//参数三：格式化缩进值

AJAX

什么是AJAX

`
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX是一种在无须重新加载整个页面的情况下，能够更新网页部分数据的技术

AJAX运行原理

ajax工作原理相当于在浏览器（客户端）与服务器之间加了一个中间层（ajax引擎），使用户操作与服务器响应异步化。一方面它向服务器提交一个请求，获取指定页面的内容;另一方面将指定的数据提交到服务器。

AJAX的优点

①　最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
②　使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力
③　可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务 器和带宽的负担，节约空间和宽带租用成本。
④　基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

AJAX的缺点

①　取决于js。存在兼容问题
②　安全问题（ajax的源代码是可读的，攻击者可以从脚本插入系统）
③　AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大

get 和 post的区别

Get: get提交时参数会直接暴露在URL上，get 与 post 相比更简单也更快，而且在大多数的时候都能使用，但是get有数据量的限制。
Post: post能更新服务器上的文件或数据库向服务器发送大量的数据，在发送的内容可包含的未知字符用户输入时，post 比 get 更稳定也更可靠，get有数据量的限制而post则没有数据量的限制。

get	post
get是从服务器上获取数据	post是向服务器传送数据
有数据量的限制。1024字节	没有数据量的限制
只能提交字符串数据	可以提交多种类型数据
速度较快	速度较慢
有请求缓存	没有缓存
会被收藏书签	不会收藏书签
GET请求会将参数跟在URL后进行传递，数据在URL中可以看到	POST请求通过headers提交。用户是不可见的

同步和异步

同步处理

触发 ajax，请求服务器，等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

异步处理

触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。

ajax四部曲

（1）XMLHttpRequest 对象

ajax的核心：XMLHttpRequest 对象（简称XHR）

 if (window. XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject( 'Microsoft. XMLHTTP') ;//兼容ie
        }

（2）设置请求方式和请求地址

//get请求
 xhr.open('get','地址?a=100&b=200',同步/异步);
 xhr.send();

//post请求
 xhr.open('get','地址',同步/异步);
 xhr.setRequestHeader('content-type','application/x-www-form-urlicoded');
 xhr.send('a=100&b=200')

（3）发送请求

 xhr.send();

（4）监听状态变化，处理返回结果并渲染页面

 xhr.onreadystatechange = function(){
            //判断请求是否成功
            if(xhr.readyState == 4){
                //判断数据是否接受成功
                if(xhr.status == 200){
                    console.log(xhr.responseText)
                }else{
                    console.log(xhr.status)
                }
            }
              
        }

readyState状态（xhr的状态）

readyState状态	含义
0	（请求为初始化）创建xhr对象，未调用open()
1	调用open，未调用send(),连接已建立，但未发送
2	请求已发送
3	请求处理中，通常部分已完成
4	请求已完成，响应成功

status状态（http的状态）

status状态	含义
200 OK	请求-响应成功
302	跳转，响应头中的location地址
304 Not Modified	请求资源没有修改，请直接使用客户端缓存的资源，并不是报错，是指缓存命中了，也就是说请求的这个资源客户端缓存中存在
403 Forbidden	请求的资源拒绝访问（认证失败）
404 Not Found	请求的资源不存在
500 Internal Server Error	服务器内部错误

其他

form表单提交

注：提交数据时候回刷新表单

		<form action="1.html" method="post/get">			
			<input type="text" name="user" />
			<input type="submit" value="提交" />
		</form>

action: 提交到某个地址
method: 的值是 get和 post 就是用来提交表单的方式

http

文本传输协议，用于定义客户端和服务器传输的文本传输和规范
2.一个URL地址可以有以下几个组成部分：https://www.yarong.cn:8080/search?w=ajax
1.https是协议；
2.www.yarong.cn是域名；
3.8080是端口号；
4./search是路径；
5.？w=ajax是URL地址带的参数

HTTP:超文本传输协议，是一个客户端和服务器端请求和应答的标准。
HTTPS:安全超文本传输协议，基于HTTP开发，用于客户端和服务器之间交换信息。
区别：
（1）https协议需要到ca（电子服务认证）申请证书，一般免费证书较少，因而需要一定费用。
（2）http是超文本传输协议，信息是明文传输，https则是具有安全性的加密传输协议。
（3）http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443

同源策略

同源策略是一种安全协议，是客户端脚本中中重要的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性
1.同源策略要求协议、域名、端口号一致，这三个东西指的是URL地址中的不同部分。

跨域问题

前端调用后端接口，如果服务接口不在同一个域就会有跨域问题，所白了因为同源策源才有跨域问题
当我们发送XMLHttpRequest请求的时候，如果请求的是别的域(主机域名、端口)不同时，那么就会产生跨域问题(客户端无法获取服务端返回的数据)
不是XMLHttpRequest请求是不会有跨域问题的
解决方法：

1. 服务器代理
2. flash
3. jsonp
4. XHR2

jsonp

jsonp:是json的一种使用模式。可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
原理：动态的创建script标签，因为script不受同源策略的影响，通过script向服务器发送请求，服务器把数据放在回调函数内返回回来。

script，img，link标签不受跨域影响。
但是，img和link标签只能实现单向通信，即只能从客户端向服务器传递数据，这是因为img获取图片进行加载，link是获取样式表加载，而script返回的是javascript代码执行。

XHR2

      HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
      IE10以下的版本都不支持
      在服务器端做一些小小的改造即可
      header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
      header('Access-Control-Allow-Methods:POST,GET');

区别：
代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式
JSONP相对简单，但只支持GET方式调用
XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2

汉字乱码解决

用encodeURI（）先编译再解析decodeURI（）

xhr.open('get','http://localhost:8082/Ajax/ajax.php?a='+encodeURI('张三')+'&b='+encodeURI('李四'),false);
decodeURI(window.location.search);

var a=decodeURI(location.search);
		function my(a){
			var obj={};
			var b=a.slice(1);
			var c=b.split('&');
			for(var i=0;i<c.length;i++){
				var d=c[i];
				var f=d.split('=');
				obj[f[0]]=f[1];]
			}
			return obj		
		}
		my(a)

缓存

缓存是什么：当我们第一次打开一个网页，浏览器会把这个网页复制一份放在缓存中
好处：可以减少流量和带宽，节约网络资源，增快页面访问速度。

cookie

http是无状态的，每一次请求都是独立的，就是当你第一次打开网页，第二次打开网页，服务器就不认识你了，
cookie的作用就是当你再一次打开网页的时候让服务器知道。
cookie是：服务器向客户端发的特殊信息，以文本的形式存在客户端。每次向服务武器发送请求的时候都会带上来记录客户端状态。如密码用户名等。

低版本 IE 浏览器的缓存问题

post没有缓存问题
在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取，即时服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址后面加请求参数，保证每一次请求中的请求参数的值不相同。

ajax封装

	function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
 
}
ajax({
    url : "http://localhost:8082/Ajax/my.json",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
       a : "张三",
        b : 18
    },
    success : function(data){   //返回接受信息
       var a=JSON.parse(data );
        console.log(a)
    }
});