发布于 

ajax用法和json格式了解

jQuery 调用 ajax 方法概述

  ajax（异步 JavaScript 和 XML）：
  jQuery 可以通过 $.Ajax() 和 load(),$.get(),$.post(),$.getScript(),$.getJSON() 这些方法来使用 ajax。（注意下面提到的方法用，中括号括起来的参数，表示可选参数！）

$.load() 方法

1
$("#id").load(url, [data], [callback]);

url: 要请求的页面地址
data：要发送到服务器的 key/value 数据，没有指定传递方式默认为 get 方式
callback：请求完成时的回调函数（无论成败都调用），匿名函数定义如下： 

1
2
3
4
5
function(responseText, textStates, XMLHttpRequest){
	//responseText：请求返回的内容
   	//textStates：请求状态：success   error  notmodified  timeout4种
  	 //XMLHttpRequest：XMLHttpRequest对象
}

$.get() 方法

1
2
3
$("#btn").click(function(){
    $.get( url, [data], [callback], [type]);
});

url: 要请求的页面地址（可以用 php 页面处理后台数据）
data：要发送到服务器的 key/value 数据，没有指定传递方式默认为 get 方式
callback：该回调函数只会在成功时调用，匿名函数定义如下 

1
2
3
4
function(data, textStatus){
  //data：返回的内容，可以是XML文档，json文件，XHML片段等等
  //textStatus：请求状态：success  error  notmodified timeout4种
}

type：服务器返回数据的格式（有 json，xml，text，html，script）

$.post() 方法

  $.post() 的用法和 $.get() 类似，不再累述，但我们要知道 get 和 post 两种方式传递数据的区别
  总结为四字口诀：数长可缓 

1
2
3
4
5
          post                    get
数据类型   文件和二进制文件         文本
长度       无限                    255
可见性     不可见                  可见
缓存       无                      有

$.getScript( ) 方法

用于在需要的时候加载 JavaScript 文件 

1
$.getScript(url, callback);

url：请求地址 (一般是 js 文件，文件里写 js 处理问题的函数)
callback：回调匿名函数（必选参数）
一个小栗子： 

1
2
3
4
5
$("button").click(function(){
    $.getScript("hello.js", function() {
      alert(sayHello()); //调用hello.js中的sayHello()方法
    });
});

$.getJson( ) 方法

用于在需要的时候加载 SON 文件 

1
$.getJSON(url, callback);

url：请求地址
callback：回调匿名函数（必选参数），定义如下 

1
2
3
4
function(data){ // 遍历json数据
//1、$.each(data，function(index, value){//输出index索引，value变量或内容});
//2、传统的for循环遍历
}

$.Ajax()方法

前面的方法都是基于此方法实现的，所以这个方法可以实现上面 4 个方法的所有功能。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
url:"account.php", // 请求地址
type: get, // "get | post | put | delete " 默认是get
data: {"user":"jack","pwd":"1234"}, // 要发送到服务器的key/value数据
dataType:"text", // 请求数据类型（json，xml，text，html，script 和 jsonp ）
success:function(data,dataTextStatus,jqxhr){
    console.log(dataTextStatus);
    console.log(jqxhr);
    }, // 请求成功时
error:function(jqxhr,textStatus,error){
    console.log(jqxhr);
    console.log(textStatus);
    } // 请求失败时
});
//(6个参数，是用逗号隔开每个参数，最后可以不用逗号)

对 JavaScript 与 JSON 的了解

  描述 JSON 格式数据的语法采用了 JS 对象字面量的表示方法，但是不能把 JS 对象看做是 JSON，它们只是语法相似，和 XML 一样 JSON 只是一种存储数据的类型，不算编程语言。下面会具体对比它们。

完整的 JavaScript 实现

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

JavaScript 数据类型

总共有六种类型，可以用 typeof 操作符检测类型，具体如下：
“undefined”——如果这个值未定义；
“boolean”——如果这个值是布尔值；
“string”——如果这个值是字符串；
“number”——如果这个值是数值；
“object”——如果这个值是对象或 null；
“function”——如果这个值是函数

for-in 遍历

用来枚举对象的属性（注意：对象的属性没有顺序） 

1
for (property in expression) statement

小栗子： 

1
2
3
4
5
6
7
8
function a(obj){
		if(obj != null || obj != undefined){
			for(var pro in obj){
				document.write(pro+"<br>");
			}
		}
	}
a(window); // 遍历window对象的所以属性

JSON 数据格式

概述

  JSON: JavaScript Object Notation（中文名：JavaScript 对象表示法），它和 JavaScript 对比如下：
1、JSON 中没有变量的概念，没有 (不用) 声明变量
2、没有末尾的分号
3、对象的属性必须加双引号

数据类型

  与 JavaScript 对比：
1、简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null。
但 JSON 不支持 JavaScript 中的特殊值 undefined。
2、对象 {}：是一组无序的键值对
3、数组 []：表示一组有序的值的列表
下面是一个栗子： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
[
    {
        "age": 18,
        "name": "张三",
        "school": {
            "location": "位置",
            "name": "一中",
            "teacher": [
                "老师一",
                "老师二"
            ],
            "year": 2018
        }
    },
    {
        "age": 18,
        "name": "李四",
        "school": {
            "location": "位置",
            "name": "一中",
            "teacher": [
                "老师一",
                "老师二"
            ],
            "year": 2017
        }
    }
]

JSON 对象的方法

  JSON 对象有两个方法：stringify() 和 parse()
1、把 JavaScript 对象序列化为 JSON 字符串（默认情况下，JSON.stringify() 输出的 JSON 字符串不包含任何空格字符或缩进）
2、把 JSON 字符串解析为原生 JavaScript 值

JSON 与 XML 的写法对比

json 栗子： 

1
2
3
4
5
{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

xml 栗子： 

1
2
3
4
5
6
7
8
9
10
11
<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。