哈哈,以前学前端学过,那时不会后台,没搞明白,现在再学试试看。
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 |
|
jsonObj指的是json对象。对象结构是以“{”开始,到“}”结束。其中“键名”和“值”之间用英文冒号构成对,两个“键名:值”之间用英文逗号分隔。
注意,这里的键名是字符串,但是值可以是数值、字符串、对象、数组或逻辑true和false。
二、JSON数组结构
JSON数组结构是用中括号“[]”括起来,中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。
语法:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
说明:
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 和 https://google 不同,因为协议不同;
- http://localhost:8080 和 http://localhost:1000 不同,因为端口不同;
- http://localhost:8080 和 https://google 不同,协议、域名、端口号都不同,根本不是一家的。
根据同源策略,我自己做的一个网页 http://localhost:8080/test.html 就无法通过ajax直接获取 http://google 的数据。
如果没有同源策略,你我都可以随便通过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指向的文件返回服务器端数据。
更多推荐
菜鸟AJAX 教程和JSON
发布评论