ajax技术 使用详解

一，概念

1，AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2，AJAX =Asynchronous异步JavaScript and XML.
3，AJAX是一种用于创建快速动态网页的技术。
4，通过在后台与服务器进行少量数据交换, AJAX可以使网页实现异步更新。这意味着可以 在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页

二，工作原理

1，AJAX是基于现有的Internet标准,并且联合使用它们:
2，XMLHttpRequest对象(异步的与服务器交换数据)
3，JavaScript/DoM 信息显示/交互)
4，css (给数据定义样式)
5，XML (作为转换数据的格式)

三，原生Ajax

1，创建XMLHttpRequest对象
2，打开连接open(请求方式，请求地址，同步异步)
3，发送请求send(); get请求数据直接拼接在请求地址栏，post请求数据拼接在send中
4，回调函数，readyState属性存有XMLHttpRequest的状态信息。当readyState等于4且状态status为 200时,表示响应已就绪:

1，创建XMLHttpRequestion对象
	XMLHttpRequest对象是AJAX的基础。
	所有现代浏览器均支持XMLHtpRequest对象(1E5和1E6使用Activexobject)
	XMLHttpRequest用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
	所有现代浏览器(IE7+, Firefox, Chrome, Safari以及Opera)均内建XMLHttpRequest对象。创建XMLHttpRequest对象的语法:
	var xmlhttp=new XMLHttpRequest();
	老版本的Internet Explorer (IE5和1E6)使用Activex对象
    var xmlhttp-new Activexobject("Microsoft. XMLHTTP");
    为了应对所有的现代浏览器,包括1E5和IE6,请检查浏览器是否支持XMLHttpRequest对象。如果支持,则创建XMLHttpRequest对象。如果不支持,则创建Activexobject 

GET和POST的选择
	与POST相比, GET更简单也更快,并且在大部分情况下都能用。
	然而,在以下情况中,请使用POST请求:.
	无法使用缓存文件(更新服务器上的文件或数据库)。
	向服务器发送大量数据(POST没有数据量限制)。
	发送包含未知字符的用户输入时, POST比GET更稳定也更可靠
GET请求
	xmlhttp.open ("GET", "路径拼接要传递的参数",true(异步));
	xmlhttp.send();
POST请求
	1，//如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据:
	  xmlhttp.open ("POST","路径", true);
	  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  xmlhttp.send("fname-Henry&1name-Ford");
 	2，//如果是以JSON字符串的格式传输数据：
 	  xmlhttp.setRequestHeader("Content-type","  application/json;charset=utf-8");
	  xmlhttp.send(json格式字符串);

3，回调函数
	如需使用async-false,请将open()方法中的第三个参数改为false:我们不推荐使用	
	async-false,但是对于一些小型的请求,也是可以的。请记住, JavaScript会等到服务器响应就绪才继续执行。
	如果服务器繁忙或缓慢,应用程序会挂起或停止。注意:当您使用async-false时,请不要编写onreadystatechange函数-把代码放到send（）语句后面即可:
	回调函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个AJAX任务,
	那么您应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数。·该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务(每次调用可能不尽相同) :
4，readyState
	每当readyState改变时,就会触发onreadystatechange事件。
	在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
	readyState属性存有XMLHttpRequest的状态信息。当readyState等于4且状态为200时,表示响应已就绪:
XMLHttpRequest响应
	如需获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或responsexML属性。
	responseText属性。如果来自服务器的响应并非XML,请使用responseText属性responseText属性返回字符串形式的响应,因此您可以这样使用:
	responsexML属性。如果来自服务器的响应是XML,而且需要作为XML对象进行解析,请使用responsexML属性:

原生ajax例子

function registerUser() {
            var name = document.forms["register_form"]["name"].value;
            var pwd=document.forms["register_form"]["pwd"].value;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                var sign = xhr.responseText;
                if (xhr.readyState == 4 && xhr.status == 200){
                    if (sign == 0){
                        alert("注册失败")
                    }else{
                        alert("注册成功，即将跳转到登录页面！");
                        var wait = 2;
                        setInterval(function () {
                            wait--;
                            if(wait == 0){
                                window.location="login.jsp";
                            }
                        },1000);
                    }
                }
            };
            xhr.open("POST","register",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("name="+name+"&pwd="+pwd);
        }

四，JQ封装的Ajax

1，$.get(URL,callback);

2，$.post(URL,data.callback);

3，$.ajax():默认get请求，表单格式

url：跳转地址

type：请求方式（get请求和post请求）

async：true（异步），false（同步）

data：需发送的数据（get请求自动拼接在地址栏，post请求则不会，key=value，&拼接，post请求可发送json对象转换的json字符串格式数据）

dataType：回传的数据接受格式，
	"xml": 返回XML文档，可用jQuery处理。
	"html": 返回纯文本HTML信息；包含的script标签会在插入dom时执行。
	"script": 返回纯文本JavaScript 代码。不会自动缓存结果。除非设置了"cache"参				数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请				求。(因为将使用DOM的script标签来加载)
	【"json": 返回JSON数据】
	"jsonp": JSONP格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" 				 jQuery将自动替换?为正确的函数名，以执行回调函数。
	【"text": 返回纯文本字符串】
	
contentType：默认"application/x-www-form-urlencoded"表单格式
			"application/json;charset=utf-8"发送json字符串数据提交格式
			
success：function(data){}:请求成功返回，data代表返回固定了格式的数据

ajax封装版例子

 $.ajax({
       url:"../manager/addProduct",
       type:"post",
       data:strJson,
       dataType:"text",
       success:function(date){
            if (date == "1") {
                alert("添加成功");
                window.location="showAllProduct.jsp";
            }else{
                alert("添加失败")
            }
        },
         contentType:"application/json;charset=utf-8"
       })

收藏加关注，再来不迷路！！！