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