AJAX基础知识点学习

前端之家收集整理的这篇文章主要介绍了AJAX基础知识点学习前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、AJAX(Asynchronous JavaScript and XML)即,异步JavaScript和XML

2、同步/异步区别
同步
①每次进行整个页面的刷新
②同步的链接在同一时间只能有一个,它的执行会阻止后续JS的运行,JS必须在同步链接执行完毕后才能继续执行。
异步
每次只刷新需要更新的部分
②可以发生多个,同时,不会阻止JS运行

3、异步加载/AJAX的特点及优势
① 局部刷新,按需加载,只有页面中真正改变的部分得到更新;
② 能够降低服务器的数据流量,页面在更新,用户能够继续工作
③ 浏览器能够从服务器端同时请求多项内容
④ 每次传递的流量相对是比较小的,浏览器请求返回速度快一些

4、不能整个页面全部使用AJAX进行数据申请的原因?
因为不利于SEO标签内部都是空的,SEO抓取不到,对于页面中比较重要的信息,通常使用静态

5、AJAX几个基本API
①new XMLHttpRequest()(IE5 和 IE6 使用 ActiveXObject)。
②open()
③send()
④onload()
⑤responseText()

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6,IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

open(method,url,asyn) 确定即将链接的网址及方式

参数
method:String 采用post/get形式请求
url:String, 要链接的网址
asyn:Boolean,是否发起异步请求

send(data)

参数
6、异步加载的几个基本步骤
<script>
var url = '2.html';
// 创建请求
var xhr = new XMLHttpRequest();
// 确定请求的方式以及请求的地址
xhr.open('post',url,true);
// 发生请求
xhr.send(null);
// 服务器端加载完成
xhr.onload = function() {document.writeln(xhr.responseText);}
</script>
7、 AJAX只能处理文本类的文件,对于图片不能处理
8、innerHTMl中script代码是不会被执行的,AJAX返回的是字符串
eval的作用:让字符串当做JS去执行, 如果遇到innerHTML中JS不执行的问题,需要使用eval方法,但是,性能不好,同时在JS的严格模式和非严格模式下存在不同,在项目和代码中尽量少出现.

xhr.onload= function() {
con.innerHTML=xhr.responseText;
/*con下的script*/
var cons = con.getElementsByTagName('script');
for (var i = 0; i < cons.length; i++) {
eval(cons[i].innerHTML);
};
}
/*
* a、直接在对象data后面加点。再加属性即可;
* b、采用[ ]的方式访问,有点类似数组,不过是通过key去索引;
*/
var json = '{"a":"HTML5自由者","b":"黄艺斌"}';
var data = eval("("+json+")");
alert(data.a); // 弹出: HTML5自由者
alert(data['b']); // 弹出: 黄艺斌

如果每个tab切换都用一个文本格式来创建则要求创建很多,这时候需要用到数据格式JSON或者XML

9、❤数据格式
JSON 与XML都是常见的数据格式
JSON(JavaScript Object Notation)轻量级数据格式,直译为JavaScript对象符号
XML是一种可扩展标记语言,与HTML都是标记语言

10、❤ JSON优劣势:
JSON的优势
JSON的劣势

① 轻量级,体积小,节省流量,提高加载速度

② 解析成原生JS对象,解析比XML更快
③ 查找数据无需查找标签,更快

在古老的浏览器如IE7-不支持原生JSON解析,
需要引入第三方库的支持

JSON/XML辨析:
可读性:两者都有很长的可读性,XML数据严格遵循XML DOM模型规范,JSON严格遵循JS语言语法
可扩展性:XML数据通过自定义标签,可以设计更复杂的数据嵌套结构,而JSON可以通过数组和对象的无穷组合也能够模拟任意XML数据结构。
编码难度:XML有丰富的编码工具(如Dom4j、jDom等),JSON也有json.org提供的工具,但是JSON编码明显比XML容易,即使不借助工具也可以手写JSON代码,但是要手写XML文档就非常困难。
解码难度:XML数据解析需考虑结构层次及节点关系,解析难度非常大,JSON数据不存在解析难度
文件大小:同样的数据,XML文件大小大于JSON文件体积大小

11、JSON常见形式:对象、数组
JSON数组的写法:
数组是一个有序的值的集合

JSON对象的写法:
对象是一个无序的"名/值"对的集合





12、JSON数据的内容
JSON中数据内容通过值来表示:字符串、数值、逻辑值、null、对象、数组

* 字符串必须使用双引号括起来
* 数值可以直接引用,不需要添加引号
* 逻辑值仅包含true和false,直接引用,不需要添加引号
* 在JSON数据中,分隔符(空格,制表符和换行符)是不被解析的,因此可在任意位置增加空白

13、JSON数据类型转换
JSON.parse(string); 将json字符串string转换为js对象
JSON.stringify(obj); 将JS对象转换为JSON字符串


原文:CSDN博客--HTML5自由者http://blog.csdn.net/html5_
原文链接:https://www.f2er.com/ajax/164843.html

猜你在找的Ajax相关文章