Ajax学习心得

最近学习了Ajax的实现做笔记以便以后查询
通常用from表单进行提交请求的时候，画面会刷新，Ajax的特点在于提交请求的时候不会跳转界面，并且结合DOM可以使返回的值动态在本页面添加
Ajax的实现：
1、创建一个Ajax对象：
针对 IE7+, Firefox, Chrome, Opera, Safari的浏览器使用如下方式即可

var Ajax = new XMLHttpRequest();

对于IE6, IE5浏览器需要用：

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

此处可以用一个if判断进行对Ajax对象的创建,整段代码如下：

function GetAjax(){    var Ajax;    if(window.XMLHttpRequest){        Ajax = new XMLHttpRequest();    }else if(window.ActiveXObject){        Ajax = new ActiveXObject("Microsoft.XMLHTTP");     }       return Ajax;}

2、打开链接

//get方式var url = "./Test";Ajax1.open("GET", url, true);//此处只是访问了一下url，若需要传参则在url中加入信息

//post方式xmlhttp.open("POST","./Test",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

get和post方式的区别在于：
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
3、发送数据

//post方式: post请求中，在send中加入自己要发送的数据Ajax1.send("fname=Henry&lname=Ford");//get方式:get请求中，数据是写在url中的，只需要发送就可以Ajax1.send();

4、接受响应

//onreadystatechange是XMLHttpRequest中提供的一个事件当readyState 的值发生改变时会自动调用/**readyState的值表示了当前请求的状态：0：尚未初始化1：正在加载2：加载完毕3：正在处理4：处理完毕。当readyState的值变为了4就证明服务器已经响应完毕*/Ajax1.onreadystatechange = function() {    if (Ajax1.readyState == 4) {        alert(Ajax1.status);        if (Ajax1.status == 200) {            alert(Ajax1.responseText);        } else {        //如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。                alert("网络连接中断！");        }    }}

以上为ajax请求和响应的整个过程，在用get方式尝试的时候发现一个坑：
readyState已经等于4了，但是status却是0，无论是从tomcat发布的文件还是本地都无法访问成功。后来将url改为本地就成功了。查阅了很多资料可能是因为跨域访问的问题，因为没有设置跨域访问，所以会显示0