拾起原生javascript---Ajax学习笔记

最近在做手机短信验证码快速登录的实现。

为了更好体验,所以要使用到Ajax技术。

Ajax算是javascript里面的一个神器。概念性的东西就不记了,异步处理等等。(实际也不是很了解。很多字眼难以斟酌。)就当做时候页面A提交信息,然后A不跳转,而后台服务器能一边操作并处理信息后返回,而页面不需要跳转。当信息返回时A只要有处理信息的javascript代码就可以了。

现在“市面上”更多的Ajax应用都用起了各种框架,不过还是坚持学习原生,才能从根源解决问题。了解了基本原理再去用框架,才是王道。

先是在w3school.com.cn 学习ajax知识。

Ajax需要XMLHttpRequest对象。其构造方式如下:为了兼容各种浏览器。

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);

send();//确认发送

定义onreadyStateChange响应:responseText 或者responseXML

主流method主要是get和post方法:区别自行google,使用上也有区别,在于传参方式。

Get: url后跟着 "?变量名1=值1&变量名2=值2"

xmlhttp.open("GET","test.php?fname=dd&tname=dd",true);
xmlhttp.send();
Post:参数键值对规范依旧,但是放到send方法里面。
xmlhttp.open("POST","test.php",true);
xmlhttp.send();
xmlhttp.open("POST","test.php",true);
xmlhttp.sendRequestHeader(
"Content-type","application/x-www-form-urlencoded"
);
xmlhttp.send("fname=dd&tname=dd");
 表头信息等,暂时不研究,貌似有关中文会乱码的情况。

响应处理:

  响应数据:

    responseText
    responseXML
 
响应处理:
异步:
xmlhttp.onreadystatechange= function(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
    document.getElementById("").innerHTML=xmlhttp.responseText;
}
}
属性描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面


xmlhttp.getAllResponseHeaders()获取header信息
xmlhttp.getResponseHeader('Last-Modified');
 
post构造表单的参数传递
表单提交等方式,仍然需要自个儿去构造参数,不然在服务器端是拿不到数据的,因为你压根就没传参。
function generateFormString(formobj){
var result ="";
if(formobj){
  var objs = formobj.elements;
  var obj;
  for(var i=0;i<objs.length;i++){
    obj = objs[i];
      if(obj.name!=undefined&&obj.name!=""){
        result+=obj.name+"="+obj.value+"&";
        }
    }
  result+="notneed=1"; //非必要,只是为了格式
  }
  return result;
}

 

posted @ 2013-05-01 22:07  Dont  阅读(...)  评论(...编辑  收藏