Ajax的使用

一、Ajax的工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

二、XMLHttpRequest对象的属性

1. onreadystatechange: 会在装填改变的时候调用方法
2. readyState:有5种状态：当响应时，说明服务器已经处理过请求 值是4 此时也会获取数据
3. states：是服务器的HTTP状态码
   .200: “OK”
   · 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
   · 403 （禁止） 服务器拒绝请求。
   · 404 （未找到） 服务器找不到请求的网页。
   · 408 （请求超时） 服务器等候请求时发生超时。
   ·500 （服务器内部错误） 服务器遇到错误，无法完成请求。
4. responseText: 服务器的响应，返回数据的文本 字符串

三、常用的方法

代码：

var xmlhttp;

window.onload = function(){
	xmlhttp=CreateXmlHttp();
GET请求
	xmlHttp.open("GET","#",true);
	xhr.send();

POST请求
	如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
	xmlhttp.open("POST","ajax_test.asp",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send("fname=Bill&lname=Gates");



xhr.onreadystatechange=function(){

if(xhr.readyState===4&&xhr.states===200){
var test = xhr.responseText;

//JOSN字符串到对象
JOSN.parse(test);

}

}
}

//创建XMLHttpRequest对象
       function CreateXmlHttp() {
            
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        } 

思考：
服务端json字符串可以是Fast JSON or GSON 去做
但是，HTML中的表单封装成JSON对象后到JSON字符串 发送 会用到jQUERY 吧

form表单数据封装成json格式并提交给服务器

$(".fee_sure").click(function () {
        var dataObj = $("#costForm").serialize();
        var payType = $('input[name="payType"]:checked').val();
        if(payType == undefined){
            alert("请选择付款类型");
            return ;
        }else{
            $.ajax({
                url:"/webCenter.do?method=saveUserMessage",
                type: "post",
                dataType:"json",
                data:dataObj,
                cache:false,
                ifModified:true,
                success:function(json){
                        if(json.flag == 1){
                            alert("1234");
                        }
                }
            })
        }
    })