拾起原生javascriptAjax学习笔记

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

为了更好体验，所以要使用到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;
}