ajax小结

来源：互联网发布：sql 判断是否在一天内编辑：程序博客网时间：2024/05/17 08:21

Ajax简介：

1、 Ajax特点：

1、ajax不是新技术，是之前技术的整合，是异步的JavaScript和XML

2、用于局部刷新、提高用户的体验度，数据从服务器中加载

3、 Ajax实现的是B/S架构下的异步交互

4、包括的技术：JavaScript、XML、CSS、XMLHttpRequest

5、 JavaScript:向服务器发送请求，获得返回结果，更新页面

6、 XML：用来封装数据

7、同步交互与异步交互：同步交互，客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等)；异步交互，客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)

8、同步与异步的区别：同步交互，执行速度相对比较慢，响应的是完整的HTML页面；异步交互，执行速度相对比较快，响应的是部分数据。

2、 Ajax核心原理：

Ajax的工作原理是使用户操作与服务器响应异步化。Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，进行数据的传递和获取，一共有三种数据格式html、xml、json，一般使用json的数据格式，因为是轻量级的比较容易使用和解析，然后用javascript来操作DOM而更新页面，实现局部刷新的效果。运用xmlhttprequest对象实现异步数据获取是ajax的核心

3、原生js实现ajax

<scripttype="text/javascript">

window.onload =function(){

document.getElementById("aaa").onclick=function(){

//1、创建一个xmlhttprequest对象

var request = new getXhr();

//2、准备发送请求的数据：url

var url = this.href;

//发送状态是get

var method="GET"

//发送请求是post

//request.setRequestHeader(Content-Type,application/x-www-form-urlencoded);

//3、调用open方法

request.open(method,url);

//4、调用send方法

request.send(null);

//5、为XMLHttpRequest对象添加onreadystatechange相应函数，这个事件由服务器触发

request.onreadystatechange=function(){

//6、判断响应是否完成，XMLHttpRequest对象的readyState属性为4的时候

if(request.readyState== 4){

//7、在判断相应是否可用，XMLHttpRequest对象的state属性为200的时候

if(request.status==200||request.status==304){

//8、打印相应结果responseText

document.getElementById("bbb").innerHTML=request.responseText;

}

//取消节点默认行为

return false;

}

//获取XMLHttpRequest对象

function getXhr() {

//声明XMLHttpRequest对象

var xhr = null;

// 根据浏览器的不同情况进行创建

if (window.XMLHttpRequest) {

// 表示除IE外的其他浏览器

xhr = new XMLHttpRequest();

} else {

// 表示IE5之前的浏览器

xhr = newActiveXObject('Microsoft.XMLHttp');

}

return xhr;

}

</script>

这样就可以异步的获取数据进行显示了

4、使用jquery实现ajax（最长用的几个）

$.ajax() :费劲

$.ajax({

type: "get",

url: "<c:url value='/CheckNameServlet' />",

data: "uname=" + uname,//传递的参数

success: function(result) {

alert($.trim(result).indexOf("true")> -1);

if($.trim(result).indexOf("true") > -1) {

$("#unameDiv").html("用户名已被占用");

}else {

$("#unameDiv").html("用户名可以使用");

}

error: function() {

alert("ajax执行失败");

}

});

$.post()：比较方便

$(function(){

$("#aaa").click(function(){

//使用load方法添加数据

$("#bbb").load(

this.href,

{"time":newDate()});

return false;

});

</script>

如果与后台交互的话可以使用PrintWriter 的对象将返回结果返回到客户端

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

String name = request.getParameter("uname");

if ("admin".equals(name)) {

out.println("用户名存在");

out.flush();

out.close();

}

$.getJSON()：用于回掉json类型的数据

$.getJSON( 'LoadServlet',

{uname : uname},

function(data) {

alert(data);

alert(data.flag);

alert(data.msg);

});

使用PrintWriter对象写入，并且要写成json类型

PrintWriterout = response.getWriter();

Stringname = request.getParameter("uname");

if("admin".equals(name)) {

out.print("{\"flag\":false,\"msg\":\"heihei\"}");//注意必须加斜杠

out.flush();

out.close();

}

补充：　

　　onreadystatechange:设置状态改变时的回调函数，回调函数用来获取服务器数据。

　　readyState:服务器状态响应
　　　　　　状态码：
　　　　　　0：未初始化
　　　　　　1：正在加载
　　　　　　2：加载完成
　　　　　　3：请求进行中
　　　　　　4：请求完成
　　responseText:服务器返回的数据(文本格式)

　　responseXML:服务器返回的数据（XML格式）

阅读全文

0 0