教你快速上手Ajax

教你快速上手Ajax

一、原生JS实现Ajax

//定义方法
function  fun() {
    //发送异步请求
    //创建核心对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {		
    	// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
    	// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 建立连接
    /*
        参数：
            1. 请求方式：GET、POST
                * get方式，请求参数在URL后边拼接。send方法为空参
                * post方式，请求参数在send方法中定义
            2. 请求的URL：
            3. 同步或异步请求：true（异步）或 false（同步）

     */
    xmlhttp.open("GET","ajaxServlet?username=tom",true);
    //发送请求
    xmlhttp.send();

    //接受并处理来自服务器的响应结果
    //获取方式 ：xmlhttp.responseText
    //当服务器响应成功后再获取
    //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
    xmlhttp.onreadystatechange=function()
    {
        //判断readyState就绪状态是否为4，判断status响应状态码是否为200
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           //获取服务器的响应结果
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }
}

二、JQuery方式实现Ajax

1、 方式一

//定义方法
function  fun() {
    //使用$.ajax()发送异步请求
    $.ajax({
        url:"Servlet" , 	// 请求路径
        type:"POST" , 	//请求方式
        //data: "username=kun&age=18"//请求参数
        data:{"username":"kun","age":18},
        success:function (data) {
            alert(data);
        },//响应成功后的回调函数
        error:function () {
            alert("错误")
        },//表示如果请求响应出现错误，会执行的回调函数
         dataType:"text"//设置接受到的响应数据的格式
    });
}

2、 方式二

	//定义方法
    function  fun() {
        $.get("Servlet",{username:"kun"},function (data) {
            alert(data);
        },"text");
    }

3、 方式三

 		 //定义方法
        function  fun() {
            $.post("Servlet",{username:"kun"},function (data) {
                alert(data);
            },"text");
        }

4、注册方法

 //在页面加载完成后
    $(function () {
       //给username绑定blur事件
       $("#username").blur(function () {
           //获取username文本输入框的值
           var username = $(this).val();
           //发送ajax请求
           //期望服务器响应回的数据格式：{"user":true,"msg":"此用户名已注册"}
           //                         {"user":false,"msg":"用户名可用"}
           $.get("Servlet",{username:Kun},function (data) {
               //判断user键的值是否是true
               // alert(data);
               var span = $("#s_username");
               if(data.user){
                   //用户名存在
                   span.css("color","red");
                   span.html(data.msg);
               }else{
                   //用户名不存在
                   span.css("color","green");
                   span.html(data.msg);
               }
           });
       }); 
    });

三、思维升级实例

1、原生get方法

//执行get请求
function get() {
	//创建xmlhttprequest 对象
	var request = ajaxFunction()；
	//发送请求
	request.open("GET" ,"/kun/Servlet?name=kun&age=18" ,true );
	//获取响应数据 注册监听的意思, 一会准备的状态发生了改变，那么就执行 = 号右边的方法
	request.onreadystatechange = function(){
		//能够正常处理, 状态码是200
		if(request.readyState == 4 && request.status == 200){
			//弹出响应的信息
			alert(request.responseText);
		}
	}
	request.send();
}

2、原生post方法

function post() {
		// 创建对象
		var request = ajaxFunction();
		//发送请求
		request.open( "POST", "/kun/Servlet", true );
		//状态监听 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){
				alert("post："+request.responseText);
			}
		}
		//post方式带数据要添加头，提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//send方法里面写表单数据
		request.send("name=kun&age=18");
	}

3、JQ的Ajax异步请求

function post() {
		$.post("/kun/Servlet", {name:"kun",age:18},function(data,status) {
			$("#div").html(data);
		});
	}