厦门ajax程序,【厦门JavaEE就业1期-每日总结】jQuery&Ajax

王清松

AJAX(Asynchronous JavaScript And XML)

概述

完成页面的局部刷新，不中断用户的体验

使用XML作为数据传递的格式

入门(了解)

XMLHttpRequest对象

属性

onreadystatechange:当XMLHttpRequest状态改变的时候触发一个函数

readyState：XMLHttpRequest状态

0未初始化

1初始化

2发送数据

3数据传送中

4完成

status：获得响应的状态码(200,404....)

responseText：获得响应的文本数据

responseXml：获得响应的XML数据

方法

open(请求方式，请求路径，是否异步):异步去向服务器发送请求

send(请求参数)：发送请求

get方式请求参数写在请求路径中

setRequestHeader(头信息，头的值)

处理Post请求方式的中文问题

创建XMLHttpRequest对象

IE：将XMLHttpRequest对象封装在一个ActiveXObject组件

低版本：var Xhr=new ActiveXObject("Msxml2.XMLHTTP");

高版本：var Xhr=new ActiveXObject("Microsoft.XMLHTTP");

Firefox：直接可以创建XMLHttpRequest对象

var Xhr=new XMLHttpRequest();

实现传统方式的AJAX

GET方式提交请求

第一步：创建一个异步对象

var xhr=getXhr()

function getXhr(){

var xmlHttp;

try{ // Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e){

try{// Internet Explorer

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e){

try{

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

}

catch (e){}

}

}

return xmlHttp;

}

第二步：设置对象状态改变来触发一个函数

xhr.onreadystatechange = function(){

if(xhr.readyState==4){//请求发送成功

if(xhr.status==200){//响应也成功

var date=xhr.responseText;//获得响应的文本数据

document.getElementById("id").innerHTML=data;//数据写入

}

}

}

第三步：设置向后台提交的路径

xhr.open("GET","/MyWeb/Servlet",true)

如果要传参数，需要在路径后面用?

第四步：发送请求

xhr.send(null)

POST方式提交请求

比起GET需要多设置一个头信息(open下方)

xhr.setRequestHeader

("Content-Type","application/x-www-form-urlencoded")

第二个参数的值等于

表单的属性enctype的值

传参通过第四步发送请求时设置

xhr.send("name=Kingdon&password=123")

JQuery操作AJAX

(JQ对象).load(路径,参数,回调函数)

默认GET方式，传递参数后自动转换为POST方式

获得的数据直接写在JQ对象标签的中间

$.get(路径,参数,回调函数,数据类型)

数据类型不传默认返回字符串类型

也可以写XML,json

$.post(路径,参数,回调函数,数据类型)

var name=$("#id").val();

$.post("/MyWeb/Servlet",{"name":name,"age":20},function(data){

$("#div").html(data);

});

data可以自己命名，作为返回值

回调函数,指的是路径访问完毕后，拿到返回值后，执行的函数??

$.ajax

传统的

serialize()

JQ的AJAX传参的时候需要使用的方法