AJAX学习篇

今天简单敲了下ajax的代码，本来以为自己懂了，但敲了几回代码，还是出现意想不到的错误，今天在这里简单总结下Ajax的简单用法。

ajax使用四部曲：

1、创建一个XMLHttpRequest对象

 2、准备发送网络请求 

3、开始发送网络请求

4、指定回调函数的操作

ajax使用：“get”和"post"两种请求对应不同的写法

get:

　　　　　　//创建一个XMLHttpRequest对象
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHttp"); //考虑兼容性问题（IE6）
            }
 　　　　　　//准备发送网络请求 第一个参数为请求方式  第二个参数为url地址，get请求用分隔符？来传递变量 true代表异步加载
            xhr.open("get","CheckUserServlet?account="+account,"true");
            //开始发送网络请求 null为get请求的标准写法
            xhr.send(null);
            //指定回调函数
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var result=xhr.responseText;      //得到服务器（后台）返回的数据（这里为文本类型）
                    console.log(result);
                    alert(result);
                }
            }; 

post:

　　　　　　　//创建一个XMLHttpRequest对象
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHttp"); //考虑兼容性问题（IE6）
            }
　　　　　　　　//准备发送请求
　　　　　　　xhr.open("post","CheckUserServlet","true");
            var parma="account="+account;
//             对于post请求，我们应该将传递的参数放在请求体中
//             注意：这一步是仅仅针对post才会写
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(parma);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    $("span").text("用户已存在");
                    var result=xhr.responseText;
                    console.log(result);
                    alert(result);
                }
            };

servlet:

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CheckUserServlet
 */
@WebServlet("/CheckUserServlet")
public class CheckUserServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("utf-8");
        response.setCharacterEncoding("utf-8");        //get,post返回数据给前台
        String account=request.getParameter("account");
        System.out.println(account);
        PrintWriter out=response.getWriter();
        out.println(account);
        out.close();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");      //服务器接受前台数据转换为中文
        response.setContentType("utf-8");         // 指定服务器给浏览器发送的代码
        response.setCharacterEncoding("utf-8");        //get,post返回数据给前台
        String account=request.getParameter("account");
        System.out.println(account);
        PrintWriter out=response.getWriter();
        out.println(account);
        out.close();
    }

}

用jquery中的ajax方法

$.ajax()：post和get都可以使用

$.ajax({
                url:"CheckUserServlet",
                 type:"get",         //可以省略，默认为get请求
                data:{
                    account:$("#account").val()
                },
                async:true,             //可以省略，默认为true
                success:function(result){
                    $("span").text("用户已存在");
                    console.log(result);
                    alert(result);
                }
            });

$.ajax({
                url:"CheckUserServlet",
                type:"post",  
                data:{
                    account:$("#account").val()
                },
                async:true,       //可以省略，默认为true
                success:function(result){
                    $("span").text('用户已存在');
                    console.log(result);
                    alert(result);
                }

$.get()：get请求

$.get("CheckUserServlet?account="+$("#account").val(),function(result){
                $("span").text('用户已存在');
                console.log(result);
                alert(result);
            })

$.post()：post请求

$.post("CheckUserServlet",{account:$("#account").val()},function(result){
                $("span").text('用户已存在');
                console.log(result);
                alert(result);
            });