AJAX笔记

AJAX===

一、ajax实现步骤：1、创建XMLHttpRequest对象
        2、设置回调函数
   xmlHttp.onreadystatechange = function() {
       if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
       // 根据不同的返回类型处理响应
   }
        3、初始化XMLHttpRequest组件
   xmlHttp.open( type, url, async );

  get:xmlHttpRequest.open("GET",url,true);
  post:xmlHttpRequest.open("POST",url,true);
   xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        4、发送请求
   xmlHttp.send( null / string );

get:xmlHttpRequest.send(null);
post:xmlHttpRequest.send(数据信息);

二、XMLHttpRequest对象和ActiveX对象
// 兼容写法
// 如果是 IE7+,FF 等高级浏览器
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// 如果是IE 5,IE6 低版本浏览器
if( window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}

三、XMLHttpRequest对象的属性
onreadystatechange 处理服务器响应的函数

readyState     服务器响应的状态信息：
    0请求未初始化
    1服务器连接已建成
    2请求已发送
    3请求处理中
    4请求已完成

status      200：相应正确返回
       404：未找到页面

responseTest     获取字符串形式的响应数据

responseXML 获取XML形式的相应数据

四、XMLHttpRequest对象的方法
open(method,url,async)   创建http请求；
     method：请求的类型：GET或POST
     url:服务器请求地址
     async:是否异步请求，true(异步)或false(同步)

send(string)   将请求发送到服务器
     注意：string仅用于post方法，get方法为空或null

setRequestHeader()       指定请求的某个HTTP头

getResposeHeader() 从响应中获取指定的HTTP头

五、文本和 XML方式响应的区别
文本： var username = xmlHttpRequest.responseText;
  //省略其他代码……

XML：   var dom = xmlHttpRequest.responseXML;
  ......
  if(dom){
   var userNodes = dom.getElementsByTagName("username");
   if( userNodes.length > 0 ){
    var username= userNodes[0].firstChild.nodeValue;
    //省略其他代码……
   }
  }

六、jQuery 实现 AJAX （简化原生 JavaScript 实现 AJAX ）
 $.ajax()方法

$.ajax( {
  url : " 发送的请求地址",
  type : " 请求方式",
  data : " 要发送的数据",
  dataType : " 服务器返回的数据类型", // "xml html script json text"
  beforeSend : function(data) { // 码发送请求前执行的代码 },
  success : function(data) { // 码发送成功后执行的代码 },
  error : function() { // 码请求失败执行的代码 }
} );

   $.get() 方法
是$.ajax()方法中类型为GET请求的简化版
$.get() 方法
$.get(
  " 发送的请求地址" ,
  要发送的数据 key/value ,
  回调函数 ,
  "返回内容格式，xml, html, script, json, text "
);

 $.post() 方法
是$.ajax()方法中类型为POST请求的简化版
$.post() 方法
$.post(
  " 发送的请求地址" ,
  要发送的数据 key/value ,
  回调函数 ,
  " 返回内容格式，xml, html, script, json, text "
);

 $.getJSON() 方法
是$.get()方法中返回数据类型为JSON的简化版
$.getJSON() 方法
$.getJSON(
  " 发送的请求地址" ,
  要发送的数据 key/value ,
  回调函数
);

 $.getScript() 方法
通过 HTTP GET请求载入并执行一个JavaScript 文件
$.getScript() 方法
$. getScript(
" 发送的请求地址" ,
回调函数
);

 serialize() 用于序列化表单内容为字符串
 好处：不用逐个去获取表单元素的值，拼凑参数序列
serialize()
$("form").serialize() ;
// 返回参数序列
single=Single&check=check2&radio=radio1

猜你喜欢