Ajax介绍
Ajax=asynchronous JavaScript and XML(异步的JavaScript和XML)
Ajax不是新的编程语言,
而是一种使用现有标准的新方法,
其作用就是与服务器交换数据并更新部分网页的(在不重新加载整个页面的情况下),有很多使用Ajax的应用,如新浪微博,Google地图等,
学习Ajax需要先了解HTML,css,JavaScript/DOM和jQuery等知识
XMLHttpRequest介绍
XMLHttpRequest是Ajax的基础,现代所有浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject),XMLHttpRequest用于在后台与服务器交换数据,其中三个重要的属性如下:
onreadystatechange: 存储函数(或函数名),每当readyState属性变化时,就会调用该函数
readyState: 存有XMLHttpRequest的状态,从0到4发生变化。
0:请求未初始化,1:服务器连接已建立,2:请求已接受,3:请求处理中,4:请求已完成,且响应已就绪
status : 200:“OK” ,404:未找到页面
注:onreadystatechange事件被触发5次(0-4),对应着readyState的每个变化。
原生Ajax的使用
Ajax的使用分为4步
···创建Ajax引擎对象
···为引擎对象创建监听
···绑定url和请求方式
···发送请求
一个简单的键入提示实例如下(对实例的解析请看代码注释
)
页面代码
<script type="text/javascript">
function showHint(str){
if(str.length==0){
document.getElementById("textHint").innerHTML="";
return;
}
/*1.创建Ajax引擎对象*/
var xmlhttp;
if(window.XMLHttpRequest){
//IE7+,Firefox,Chrome,Opera,Safari等浏览器
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*2.为引擎对象创建监听*/
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("textHint").innerHTML=xmlhttp.responseText;
//有responseText和responseXML两个获取服务器响应回的信息,后者获取XMl,详细不在此说明
}
}
/*3.绑定url和请求方式*/
var url="/AjaxDemo1/GetHint?q="+str;
xmlhttp.open("GET",url,true);
/*
当第三个参数为false,为同步,true为异步,为false时,
无需写上面的 onreadystatechange函数,
直接在下面的send()后面写
document.getElementById("textHint").innerHTML=xmlhttp.responseText;
*/
/*
如果是post提交
在发送请求之前设置一个头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
*/
/*4.发送请求*/
xmlhttp.send();
}
</script>
</head>
<body>
<p>请输入A-Z开头的的姓氏</p>
FirstName:<input type="text" id=firstname onkeyup='showHint(this.value)'><br/>
Suggestions:<span id="textHint"></span>
</body>
服务器代码
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String[] firstName=new String[30];
firstName[0]="Anna";
firstName[1]="Brittany";
firstName[2]="Cinderella";
firstName[3]="Diana";
firstName[4]="Eva";
firstName[5]="Fiona";
firstName[6]="Gunda";
firstName[7]="Hege";
firstName[8]="Inga";
firstName[9]="Johanna";
firstName[10]="Kitty";
firstName[11]="Linda";
firstName[12]="Nina";
firstName[13]="Ophelia";
firstName[14]="Petunia";
firstName[15]="Amanda";
firstName[16]="Raquel";
firstName[17]="cindy";
firstName[18]="Doris";
firstName[19]="Eve";
firstName[20]="Evita";
firstName[21]="Sunniva";
firstName[22]="Tove";
firstName[23]="Unni";
firstName[24]="violet";
firstName[25]="Liza";
firstName[26]="Elizabeth";
firstName[27]="Ellen";
firstName[28]="Wenche";
firstName[29]="Vicky";
String str=request.getParameter("q");
if(!"".equals(str)&&str!=null) {
String hint="";
for(int i=0;i<30;i++) {
if(firstName[i].startsWith(str)) {
if(hint.length()==0) {
hint=firstName[i];
}else {
hint+=","+firstName[i];
}
}
}
if(hint.length()==0) {
response.getWriter().write("no suggestion");
}else {
response.getWriter().write(hint);
}
}
}
代码效果如下图
每次键入都有提示,可用来做登录注册的格式校验
jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大下面来介绍jQuery.Ajxa(常用三种)
对于jQueryAjxa有简单的get和post替换换复杂的ajax,但是一般都是直接用ajax,get和post请求的格式如下
1)$.get(url, [data], [callback], [type])
2)$.post(url, [data], [callback], [type])
其中:
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)
常用的返回类型:text、json、html等
3)$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握
常用的option有如下:
async:是否异步,默认是true代表异步
data:发送到服务器的参数,建议使用json格式
dataType:服务器端返回的数据类型,常用text和json
success:成功响应执行的函数,对应的类型是function类型
type:请求方式,POST/GET
url:请求服务器端地址
三种例子如下
function ajax(){
$.get(
"AjaxServlet",
"name=djx",
function(data){
alert(data);
})
}
function ajax2(){
$.post(
"AjaxServlet",
"name=djx",
function(data){
alert(data);
})
}
function ajax3(){
$.ajax({
ayns:"true",
data:"name=djx",
dataType:"text",
type:"GET",
url:"/AjaxDemo1/AjaxServlet",
success:function(data){
alert(data)
}
})
}
常见Ajax传的数据类型为text,json,对于text,其格式为data:"key=value&key2=value2····",而json格式为data:{key:"value",key2:"value2"},还有相关的传json列表需在服务器端将其转换为String传回前端