Ajax学习第一节_Ajax入门

• 什么是Ajax？

    Ajax是asynchronous JavaScript and XML的缩写，是一种创建交互式网页应用的网页开发技术。

• 在哪里使用Ajax？

        不需要刷新整个页面，适合使用Ajax,例如：用户注册的时候验证用户名是否重复，无刷新登录，在线聊天室等。

• 如何使用Ajax？

        Ajax中Get方式异步发送请求源码下载：  http://pan.baidu.com/s/1qY9rGIw

        运行效果：

           

创建Ajax引擎   

        //创建Ajax引擎
function createXmlHttpRequest() {
    if (window.ActiveXObject) {
//ie6中创建xmlHttpRequest方法
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } else {
        //firfox、chrome、IE7
xmlHttpRequest = new XMLHttpRequest();
}
}

提交Ajax请求

function checkUserName() {
        //创建Ajax引擎
createXmlHttpRequest();
if (xmlHttpRequest) {
var userName = document.getElementById("userName").value;
//请求URL，encodeURI两次防止中文乱码
var url = "Regedit?userName=" + encodeURI(encodeURI(userName));
//get表示请求方式：get/post  url请求的地址，true表示异步，false表示同步
xmlHttpRequest.open("get", url, true);
//回调函数
xmlHttpRequest.onreadystatechange = chuli;
//发送请求
xmlHttpRequest.send(null);
}
}

servlet后台处理

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置返回的编码
response.setContentType("text/html;charset=utf-8");
// URLDecoder解码
String userName = URLDecoder.decode(request.getParameter("userName"), "UTF-8");
//使用PrintWriter打印到界面上
PrintWriter out = response.getWriter();
if (userName.equals("xukaiqiang")) {
out.println(userName + "已经存在！");
} else {
out.println(userName + "用户名可以使用！");
}
//关闭流
out.close();
}

回调函数处理

//回调函数
function chuli() {
    if (xmlHttpRequest.readyState == 4) {
document.getElementById("msg").innerHTML = xmlHttpRequest.responseText; 
}
}

• readyState 属性
  readyState 属性存有服务器响应的状态信息。当 readyState 改变时，onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值：

状态 描述 
    0 请求未初始化（在调用 open() 之前） 
    1 请求已提出（调用 send() 之前） 
    2 请求已发送（这里通常可以从响应得到内容头部） 
    3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 
    4 请求已完成（可以访问服务器响应并使用它）

• 原理

  

  由事件（onblur,onchange等）触发，创建一个xmlHttpRequest对象（XHR）,然后通过servlet/action或者其他方式，从数据库中获取数据，交给xmlHttpRequest对象处理,交给回调函数进行处理显示。