ajax学习

jquery库实现ajax

function verify(){
    //1、获取文本框内容
    //js方法
    //document.getElementById("userName")  获取dom方法
    //jquery方法,id的选择器（#），class选择器（.）
    //jquery的方法返回的都是jquery的对象，可以在它上面继续执行其他jquery方法
    var jqueryObj = $("#userName");
    var userName = jqueryObj.val();

    //2、传送数据到Server
    //jquery方法
    $.get("AjaxServer?name="+userName,null,callback) ;
}

//回调函数
function callback(data){
    //3、接受server数据

    //4、动态显示返回数据
    var resultObj = $("#result");
    resultObj.html(data);
}

 

 

使用XMLHttpReque来进行Ajax异步数据交互

 

//使用XMLHttpReque来进行Ajax异步数据交互
var xmlhttp;
function verify(){
    //1、使用dom方式获取文本框内容
    var userName = document.getElementById("userName").value;
    //2、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
        //针对firefox，safari、opera，IE7+
        xmlhttp = new XMLHttpRequest();
        //针对某些版本的Mozill的浏览器
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    }   else if(window.ActiveXObject){
        // 针对IE5、IE6、IE5.5
        //两个可以用于创建XMLHttpRequest的空间名称
        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i 
  
 
 
  
 
 
  
xml格式数据交互
 
  
var xmlhttp;
function verify() {
    var userName = document.getElementById("userName").value;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for (var i = 0; i < activeName.length; i++) {
            try {
                xmlhttp = new ActiveXObject(activeName[i]);
                break;
            } catch (e) {
            }
        }
    }
    if (!xmlhttp) {
        alert("创建失败");
        return;
    }

    xmlhttp.onreadystatechange = callback;
    xmlhttp.open("GET", "AjaxXMLServlet?name=" + userName, true);
    xmlhttp.send(null);
}

function callback() {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            var domObj = xmlhttp.responseXML;
            if (domObj) {
                var messageNodes = domObj.getElementsByTagName("message");
                if (messageNodes.length > 0) {
                    var textNode = messageNodes[0].firstChild;
                    var responseMessage = textNode.nodeValue;
                    var divNode = document.getElementById("result");
                    divNode.innerHTML = responseMessage;
                } else {
                    alert("有问题了!" + xmlhttp.responseText);
                }
            } else {
                alert("有问题了!" + xmlhttp.responseText);
            }
        }
    }
}
 
  
 
 
  
jquery  xml格式数据交互
 
  
 
 
  
function verify(){
    var jqueryObj = $("#userName");
    var userName = jqueryObj.val();
    //javascript中一个简单对象的定义方法：
    //var obj = {name:"haha",age:12};
    $.ajax({
        type:"POST",
        url:"AjaxXMLServlet",
        data:"name="+userName,
        dataType:"xml",
        success:callback,
        error:handleError
    });
}

function handleError(XMLHttpRequest, textStatus, errorThrown){
     alert(textStatus);
}

function callback(data){

    //首先要把dom对象转换为jquery对象
    var jqueryObj = $(data);
    var message = jqueryObj.children();
    var text = message.text();
    var resultObj = $("#result");
    resultObj.html(text);
}
 
  
 
 
  
 解决XHR与图片缓存问题
 
  
IE对于相同的url默认从缓存读取
 
  
方法：添加时间戳
 
  
function convertURL(url){
    var timestamp = (new Date()).valueOf();
    if(url.indexOf("?")>=0){
        url = url + "&t=" + timestamp;
    }else{
        url = url + "?t=" + timestamp;
    }
    return url;
}
 
  
 
 
  
 
 
  
解决Ajax中文乱码
 
  
 
 
  
1、页面端做一次encodeURI：
 
  
 var url = "AjaxServer?name="+encodeURI(userName);
 
  
     服务器端：
 
  
String name = new String(old.getBytes("ISO8859-1"),"UTF-8");
 
  
 
 
  
 2、页面端做两次encodeURI：
 
  
 var url = "AjaxServer?name=" + encodeURI(encodeURI(userName));
 
  
 
 
  
      服务器端：
 
  
  String name = URLDecoder.decode(old,"UTF-8");
 
  
 
 
  
解决Ajax跨域访问问题
 
  
 
 
  
 代理服务器
 
  
 
 
  
 
 
  
传送Text的Servlet
 
  
 
 
  
public class AjaxServer extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String old = request.getParameter("name");
//        String name = new String(old.getBytes("ISO8859-1"),"UTF-8");
        String name = URLDecoder.decode(old,"UTF-8");
        if(old == null || old.length() == 0){
            out.println("用户名不能为空");
        }else{
//            String name = old;
            if(name.equals("liaolitao")){
                out.println(name+"已经存在");
            }else{
                out.println(name+"尚未存在，可以注册");
            }
        }
    }
}
 
  
 
 
  
 
 
  
传送xml的Servlet
 
  
 
 
  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();
        String old = request.getParameter("name");

        StringBuilder builder = new StringBuilder();
        builder.append("");
        if(old == null || old.length() == 0){
            builder.append("用户名不能为空").append("");
        }else{
            String name = old;
            if(name.equals("liaolitao")){
                builder.append(name+"已经存在").append("");
            }else{
                builder.append(name+"尚未存在，可以注册").append("");
            }
            out.println(builder.toString());
        }
    }