首页 > 代码库 > AJAX基础知识点学?

AJAX基础知识点学?

2024-07-25 14:50:13   220人阅读

1、AJAX（Asynchronous JavaScript and XML）即，异步JavaScript和XML     

2、同步/异步差别
同步：
①每次进行整个页面的刷新
②同步的链接在同一时间仅仅能有一个，它的运行会阻止兴许JS的运行，JS必须在同步链接运行完成后才干继续运行。
异步：
①每次仅仅刷新须要更新的部分
②能够发生多个，同一时候，不会阻止JS执行

3、异步载入/AJAX的特点及优势
① 局部刷新，按需载入，仅仅有页面中真正改变的部分得到更新；
② 可以减少server的数据流量，页面在更新，用户可以继续工作
③ 浏览器可以从server端同一时候请求多项内容
④ 每次传递的流量相对是比較小的，浏览器请求返回速度快一些

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);
     // server端载入完毕
     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 = http://www.mamicode.com/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编码明显比XMLeasy,即使不借助工具也能够手写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_

AJAX基础知识点学?


联系
我们