Ajax学习第一节_Ajax入门

• 什么是Ajax？

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

在哪里使用Ajax？

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

如何使用Ajax？

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

运行效果：

创建Ajax引擎

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

提交Ajax请求

functioncheckUserName(){
//创建Ajax引擎
	createXmlHttpRequest();
		if(xmlHttpRequest){
			varuserName=document.getElementById("userName").value;
			//请求URL，encodeURI两次防止中文乱码
			varurl="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对象处理,交给回调函数进行处理显示。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!