神奇的Ajax

简介: 神奇的Ajax

实现无刷新的用户登录


带你们看一下互联网的革命


为什么要使用Ajax?除去下面我所讲的,还有很多,看下面这张图,感兴趣的可以去搜索


无刷新:不刷新整个页面,只刷新局部

无刷新的好处:

     1、 只更新部分页面,有效利用带宽

     2、 提供连续的用户体验

     3、提供类似C/S的交互效果,操作更方面,自动补全功能

XMLHttpRequest:

avaScript对象XMLHttpRequest是整个Ajax技术的核心,它提供了异步发送请求的能力

方法名

说    明

open(method,URL,async) 

建立与服务器的连接

method参数指定请求的HTTP方法,典型的值是GET或POST

URL参数指定请求的地址

async参数指定是否使用异步请求,其值为true或false

send(content) 

发送请求

content参数指定请求的参数

setRequestHeader(header,value)

设置请求的头信息 

常用属性:

       onreadystatechange:指定回调函数

       readystate: XMLHttpRequest的状态信息  

就绪状态码

说    明

0

XMLHttpRequest对象没有完成初始化

1

XMLHttpRequest对象开始发送请求

2

XMLHttpRequest对象的请求发送完成

3

XMLHttpRequest对象开始读取响应,还没有结束

4

XMLHttpRequest对象读取响应结束

常用属性 status:HTTP的状态码

responseText:获得响应的文本内容

responseXML:获得响应的XML文档对象


状态码

说    明

200

服务器响应正常

400

无法找到请求的资源

403

没有访问权限

404

访问的资源不存在

500

服务器内部错误

使用Ajax验证用户名

实现无刷新用户名验证 当用户名文本框失去焦点时,发送请求到服务器,判断用户名是否存在 如果已经存在则提示:“用户名已被可用” 如果不存在则提示:“用户名可以可用”

使用文本框的onBlur事件

      1、 使用Ajax技术实现异步交互

       2、创建XMLHttpRequest对象

       3、通过 XMLHttpRequest对象设置请求信息

      4、 向服务器发送请求 创建回调函数,根据响应状态动态更新页面

验证姓名表单-checkname.jsp

使用JavaScript验证用户名- checkname.jsp

<form name="form1" action="" method="post">
  用户名
  <input type="text" id="uname" name="username" value=""
    onblur="checkUserExists()" />
  <div id="mess" style="display: inline"/>    
</form>
function checkUserExists() {
  var f = document.form1;
  var username = f.username.value;
  if (username == "") {
  alert("用户名不能为空");
  return false;
  } else {
  doAjax("CheckUserServlet?username=" + username);
  }
}

创建XMLHttpRequest对象

var xmlhttp;
function doAjax(url) {
  try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {
    try {
    xmhttp = new XMLHttpRequest();
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType("text/xml");
    }
    } catch (e) {   }
  }
  }
}

使用Ajax进行处理-checkname.jsp

       1、创建XMLHttpRequest对象

       2、设置在服务器完成后要运行的回调函数

       3、设置请求信息

       4、发送请求

function processRequest() {
  var messdiv = document.getElementById(“mess”);
  if (xmlhttp.readyState == 4)
  if (xmlhttp.status == 200) {
    //responseText表示请求完成后,返回的字符串信息    
            if (xmlhttp.responseText == "false")
    messdiv.innerHTML = "用户名可以使用";      
            else 
    messdiv.innerHTML = "用户名已被使用";    
        } else {
    alert("请求处理返回的数据有错误");    
  }
  }
}


使用Ajax实现登录:下面是一个示例

function doAjax(){
  createXMLHttpRequest();
  var name = document.getElementById("uname").value;
  var pwd = document.getElementById("upwd").value;
  if(XMLHttp!=null){
  var url ="LoginServlet?uname="+name+"&upwd="+pwd; 
  XMLHttp.open("POST",url,true);
  XMLHttp.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded;");
  XMLHttp.onreadystatechange=processRequest;
  XMLHttp.send(null);
  }else{
  alert("不能创建XMLHttpRequest对象实例")
  }
}


实现搜索自动提示


就像下面这张图一样。搜索框会出提示

搜索提示的原理

       1、每输入完一个关键字时,向服务器发送一个请求

       2、服务器根据用户输入的关键字,从数据库中搜索相关关键字信息,并返回到客户端

       3、在客户端显示提示信息

注意事项

       当键盘的按键抬起时,触发onkeyup键盘事件

       将文本框的autocomplete属性设置为off,以免影响搜索提示

       当搜索提示出现后,需要将其中选中的搜索项突出显示,以便区分

下面是一个例子

public class SearchSuggest extends HttpServlet {
  public void doGet( …) { 
  String str = request.getParameter("search");
  List strList=new ArrayList();
  try{
    if(str!=null&str.length()>0){  
    rs=stmt.executeQuery("select distinct(title) from 
      suggest where title like '"+str+"%' order by title");
    while(rs.next())
      strList.add(rs.getString("title"));         StringBuffer sbu=new StringBuffer();
    int size = strList.size();
    for(int i=0;i<size;i++)
      sbu.append((String)strList.get(i)+"-");
    out.print(sbu.toString());  
    }
  }catch(Exception e){  e.printStackTrace();  }
  }
}
function processReuqest(){
  if(xmlhttp.readyState==4){
       if(xmlhttp.status==200){
    var sobj=document.getElementById("suggest");
    sobj.innerHTML="";
    var str= xmlhttp.responseText.split("-");
    var suggest="";
    if(str.length>0&&str[0].length>0){
    for(i=0;i<str.length;i++){
      suggest+="<div onmouseover='javascript:suggestOver(this);'";
      suggest+=" onmouseout='javascript:suggestOut(this);'";
      suggest+=" onclick='javascript:setSearch(this.innerHTML);'";
      suggest+=" class='suggest_link'>"+str[i]+"</div>";
    }
    sobj.innerHTML=suggest;
    document.getElementById("suggest").style.display="block";
    }else{
    document.getElementById("suggest").style.display="none";
    }
       }
  }
}
相关文章
|
监控 Java
jvm异常排查
jvm异常排查
161 0
|
存储 网络协议 安全
Windows Server 2022 安全功能重大更新
这篇文将介绍 Windows Server 2022 中的一些新增的安全功能,在 Windows Server 2019 的强大基础之上引入了许多创新功能。
578 0
|
前端开发 算法 JavaScript
走进WPF之MVVM完整案例
走进WPF之MVVM完整案例
473 0
|
弹性计算 负载均衡 容灾
阿里云服务器地域和可用区怎么选择?方法来了
阿里云服务器地域选择方法,什么是可用区?阿里云服务器可用区选择攻略,阿里云服务器地域和可用区选择攻略
2268 0
阿里云服务器地域和可用区怎么选择?方法来了
|
前端开发 JavaScript API
✨✨做一个伪3D效果的卡片列表来复习一下CSS动画吧~
✨✨做一个伪3D效果的卡片列表来复习一下CSS动画吧~
505 0
|
机器学习/深度学习 算法 计算机视觉
【信号处理】基于双音多频(DTMF)信号检测含Matlab源码
【信号处理】基于双音多频(DTMF)信号检测含Matlab源码
|
存储 监控 NoSQL
Redis主从复制原理以及常见问题(2)
Redis主从复制原理以及常见问题
955 0
Redis主从复制原理以及常见问题(2)
|
机器学习/深度学习 人工智能 分布式计算
阿里云发起首届 Spark “数字人体” AI 挑战赛 — 聚焦上班族脊柱健康
2020年6月4日,首届 Apache Spark AI 智能诊断大赛在天池官网上线。Spark “数字人体” AI 挑战赛——脊柱疾病智能诊断大赛,聚焦医疗领域应用,召集全球开发者利用人工智能技术探索高效准确的脊柱退化性疾病自动诊断。现已面向全社会开放,为所有大数据技术爱好者以及相关的科研企业提供挑战平台,个人参赛或高等院校、科研单位、互联网企业等人员均可报名参赛。本次挑战的目标是通过核磁共振成像来检测和分类脊柱的退行性改变,形成一批创新性强、复用率高的算法案例,并积极推动相关技术的临床应用,用科技造福医疗事业,鼓励人工智能与疾病预防深度融合的应用落地,由点到面驱动国内人工智能医疗产业发展。
阿里云发起首届 Spark “数字人体” AI 挑战赛 — 聚焦上班族脊柱健康
|
SQL JSON 分布式计算
MaxCompute - ODPS重装上阵 第八弹 - 动态类型函数
MaxCompute自定义函数的参数和返回值不够灵活,是数据开发过程中时常被提及的问题。Hive 提供给了 GenericUDF 的方式,通过调用一段用户代码,让用户来根据参数类型决定返回值类型。MaxCompute 出于性能、安全性等考虑,没有支持这种方式。
2557 0
MaxCompute - ODPS重装上阵 第八弹 - 动态类型函数