Ajax学习第一节_Ajax入门

前端之家收集整理的这篇文章主要介绍了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对象处理,交给回调函数进行处理显示

原文链接:https://www.f2er.com/ajax/161596.html

猜你在找的Ajax相关文章