Ajax技术

来源：互联网发布：哔哩哔哩软件下载编辑：程序博客网时间：2024/05/21 00:49

摘要: 定义：Ajax是一种组合技术，全拼：Asynchronous javascript and XML最大特色：异步传输，不必刷新整个页面，提升用户体验。

原理：

借助javascript内部的XmlHttpRequest对象可以进行异步传输，使用户在等待服务器返回数据的同时，可以进行其他操作。

步骤：

1、创建XmlHttpRequest对象

2、获取所需的值

3、配置XmlHttpRequest对象

4、设置回调函数

5、发送请求

登录例子（get方式）：

客户端代码（JavaScript）

function check(){    //1、创建XmlHttpRequest对象    var xmlHttpReq=new XMLHttpRequest();        //2、获取所需的值    var username=document.getElementById("uid").value;        //3、配置XmlHttpRequest对象    var url="LoginServlet?un="+username;    xmlHttpReq.open("get",encodeURI(encodeURI(url)),true);    //使用两次encodeURI方法对url进行编码，解决传值乱码问题        //4、设置回调函数    xmlHttpReq.onreadystatechange=function(){    if(xmlHttpReq.status==200 && xmlHttpReq.readyState==4){    document.getElementById("spanid").innerHTML=xmlHttpReq.responseText;    }    }        //发送请求    xmlHttpReq.send(null);    }

服务端代码 (Servlet)

response.setContentType("text/html; charset=UTF-8");    //告知客户端以UTF8形式编码    PrintWriter out=response.getWriter();    String name=request.getParameter("un");    name=URLDecoder.decode(name,"utf8");    //处理中文传值乱码    System.out.println("name="+name);    if(name.equals("周五")){    out.println("用户名已经存在");    }else{    out.println("用户名可以正常使用");    }    out.flush();    out.close();

0 0