Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术:
之前是通过form表单提交数据的,但是提交之后,会造成整个页面的重新加载;
创建Ajax的步骤:
第1步:创建Ajax对象 ===>请求码是0
第2步:连接到服务器===>请求码是1
第3步:发送请求===>请求码是1
第4步:接收返回值===>请求码是2,3,4
第1步 :如何创建Ajax对象:
格式:Var 变量 = new XMLHttpRequest();
第2步:连接到服务器
格式:open("方法","文件名",同步异步) 例如:oAjax.open("GET","abc.txt",true);
参数一:post/get
get 和post的区别:
(1)get可以缓存在浏览器历史中,而post不可以;
(2)因为post参数不会保存在浏览器历史中,所以安全性比get高;
(3)get有字符限制,最多2048字符;post无字符限制;
(4)get只允许ASCII字符,post无限制,也支持二进制;
(5)get传送的数据,所有人都可以看见,而post不会显示;
参数二:请求的文件名
参数三:同步(false) 异步(true)
同步(false) 和 异步(true)有什么区别呢:
同步交互:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待过程
异步交互:指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待
第3步:发送请求 格式:变量.send();
第4步:接收返回值: 格式:变量.onreadystatechange = function () {}
请求状态码从0到4发生变化:
0: 请求未初始化(还没有调用到open方法)
1: 服务器连接已建立(已调用send方法,正在发生请求)
2: 请求已接收(send方法完成,已接收到全部响应内容)
3: 请求处理中(解析响应内容)
4:请求成功
请求状态码 :格式:变量.status
200:"OK"
404:未找到页面 比如:当文件路径换了,就会找不到,控制台直接报错,并且显示404;
那么如何在请求成功的时候,把需要的页面打印出来呢:
通过变量.responseText来获得返回的数据;
但是直接来写返回数据,会打印3次,因为第四步就执行了三遍,返回了234;
因此我们要写一个if判断让数据只执行一次:
if (变量名.readyState==4 && 变量名.status==200){ 变量.responseText};
JSON概念:
JSON是一种轻量级的数据交换格式,它基于 ECMAScript 的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据;
JSON语法规则:数据在名称/值对中、数据由逗号分隔、花括号保存对象、中括号保存数组
JSON名称/值对:
JSON数据的书写格式是:名称/值对 :因为格式要求很严格,name 和zhangsan都要使用双引号,单引号不行;
示例:"name" : "张三"
JSON 值
可以是数字、字符串、逻辑值、数组、对象、null:
把JSON和Ajax结合,实现页面获取:
JSON页面:
HTML页面:
或者用第二种方法:使用字符串拼接 结合innerHTML 覆盖到ul里面
用for in循环实现样式: