菜鸟AJAX 教程和JSON

哈哈，以前学前端学过，那时不会后台，没搞明白，现在再学试试看。

AJAX 

读法：误[啊，贾克斯】，正确读法[ˈeˌdʒæks]  平a贾克斯

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。（本质是js嘛）

 

局部刷新

 

传说中的XHR对象   XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。哈哈，知道network为何有xhr对象了。因为ie原因，xhr对象要封装库。

 

 

http请求是无状态的，不会一直连接，视频除外

get请求很危险，URL传递参数，可见，短…………post数量无限制

                  这个东西对爬虫很有用哈

 

服务器常用的状态码

•  200：服务器响应正常。
•  304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
•  400：无法找到请求的资源。
•  401：访问资源的权限不够。
•  403：没有权限访问资源。
•  404：需要访问的资源不存在。
•  405：需要访问的资源被禁止。
•  407：访问的资源需要代理身份验证。
•  414：请求的URL太长。
•  500：服务器内部错误。

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

 

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

 

 

您可能得到的是缓存的结果。为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

 

 

 

 

 

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

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

xmlhttp.open("GET","ajax_test.html",true);

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

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

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

 

 

阮一峰json教程

 

所有的数据（data）最终都可以分解成三种类型：

第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"北京"这个单独的词。

第二种类型是序列（sequence），也就是若干个相关的数据按照一定顺序并列在一起，又叫做数组（array）或列表（List），比如"北京，上海"。

第三种类型是映射（mapping），也就是一个名/值对（Name/value），即数据有一个名称，还有一个与之相对应的值，这又称作散列（hash）或字典（dictionary），比如"首都：北京"。

 

下面这句话：

"北京市的面积为16800平方公里，常住人口1600万人。上海市的面积为6400平方公里，常住人口1800万。"

写成json格式就是这样：

[
　　{"城市":"北京","面积":16800,"人口":1600},
　　{"城市":"上海","面积":6400,"人口":1800}
]

如果事先知道数据的结构，上面的写法还可以进一步简化：

[
　　["北京",16800,1600],
　　["上海",6400,1800]
]

JSON结构共有2种

• （1）对象结构；（2）数组结构；

一、JSON对象结构

对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。

语法：

1 2 3 4 5 6 7

var jsonObj = {     "键名1":值1,     "键名2":值2,     ……     "键名n":值n }

jsonObj指的是json对象。对象结构是以“{”开始，到“}”结束。其中“键名”和“值”之间用英文冒号构成对，两个“键名:值”之间用英文逗号分隔。

注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。

二、JSON数组结构

JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。

语法：

1 2 3 4 5 6 7 8 9 10 11 12

var arr = [     {         "键名1":值1,         "键名2":值2     },     {         "键名3":值3,         "键名4":值4     },     …… ]

说明：

arr指的是json数组。数组结构是以“[”开始，到“]”结束，这一点跟JSON对象不同。不过在JSON数组结构中，每一对“{}”相当于一个JSON对象，大家看看像不像？而且语法都非常类似。

注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。

 

  var jsonStr = '{"name": "helicopter", "age":23, "gender": "男"}';

 

var obj =

        {

            "name":"helicopter",

            "age":23,

            //JSON对象内部也有一个JSON对象

            hobby:

            {

                "first":"swimming",

                "second":"singing",

                "third":"dancing"

            }

        }

三、JSONP

同源策略
ajax之所以需要“跨域”，罪魁祸首就是浏览器的同源策略。即，一个页面的ajax只能获取这个页面相同源或者相同域的数据。
如何叫“同源”或者“同域”呢？——协议、域名、端口号都必须相同。例如：

• http://google.com 和 https://google.com 不同，因为协议不同；
• http://localhost:8080 和 http://localhost:1000 不同，因为端口不同；
• http://localhost:8080 和 https://google.com 不同，协议、域名、端口号都不同，根本不是一家的。

    根据同源策略，我自己做的一个网页 http://localhost:8080/test.html 就无法通过ajax直接获取 http://google.com 的数据。

 

如果没有同源策略，你我都可以随便通过ajax直接获取其他网站的信息，这还不乱套了。。。我自己做一个搜索界面，搜索时直接用ajax从百度获取数据，那不成了小偷了。。。

重点：<img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。因此，你可以直接从一些cdn上获取jQuery，并且你网站上的图片也随时可能被别人盗用，所有最好加上水印！

 

 

过程再清晰的捋一遍：

• <script>的src不符合同源策略；
• 我通过给<script>的src赋值一个跨域的文件的网址（可能不是一个js文件），这个文件返回的字符串，浏览器会当作javascript来解析；
• 而这段javascript中，就可以包含着我所需要的跨域服务器端的数据；
• 最后，我在本页面定义一个myFn函数用来展示数据，而这段javascript中就可以直接调用myFn函数；

重点在于：同源策略 + <script>的src不属于同源策略 + 通过<script>的src指向的文件返回服务器端数据。