Js ajax 与 jquery ajax

在博客上看过一些关于ajax的东西，有的感觉讲的有点杂，有的只是贴上代码配上简易文字并不易于新手理解。下面介绍一下JS的Ajax与Jquery的Ajax用法。

JS的Ajax是围绕浏览器内内置的Ajax引擎对象展开的，使用js的Ajax完成异步操作，有下面五个步骤：

1.创建Ajax引擎对象                       

var  oscar(自定义名称) = new XMLHttpRequest();

2.为Ajax引擎对象绑定监听

oscar.onreadystatechange = function(){

}

3.绑定提交地址

oscar.open("填写请求方式POST或GET","请求地址url"，是否异步填true或false)；

4.发送请求

oscar.send();

5.接受响应数据

oscar.responseText;

具体代码：

<script type="text/javascript">

function fun0(){

       //1.创建引擎

      var oscar = new XMLHttpRequest();

      //2.绑定监听

      oscar.onreadystatechange = function(){

           //5.接收响应数据

          if(oscar.readyState == 4 && oscar.status == 200){//在判断请求已完成，响应已就绪以及资源正确的情况下接收数据

                //响应的数据

                var result = oscar.responseTest;

            }

        }

 //3.绑定地址

oscar.open("POST","${pageContext.request.contextPath}/user",true);

//POST请求解决编码问题，GET请求不需要加这句

oscar.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//4.发送请求

oscar.send();

}

</script>

readyState代表返回数据的状态码：

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

state代表引擎接收资源的状态码：

200：正确的资源

404：未找到资源

Jquery是一个优秀的js框架，对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种：

开发中经常使用的有三种：

1.$.get(url,[date],[fn],[type])

2.$.post(url,[date],[fn],[type])

    其中：

           url：代表请求的服务器端地址

         data：代表请求服务器端的数据（key=value或者json格式）

   callback：表示服务器端成功响应所触发的函数

         type：表示服务器端返回的数据类型（常用的返回类型：text、json、html等）

3.$.ajax([option0],[option1]...)

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

<script type="text/javascript">
	function fn1(){
		$.get(
			"${pageContext.request.contextPath}/userServlet", 
			{"name":"Oscar","age":20},
			function(data){ 
				alert(data.name);
			},
			"json"
		);
	}
	function fn2(){
		$.post(
			"${pageContext.request.contextPath}/userServlet",
			{"name":"oscar","age":20}, 
			function(data){ 
				alert(data.name);
			},
			"json"
		);
	}
	function fn3(){
		$.ajax({
			url:"${pageContext.request.contextPath}/userServlet",
			async:true,
			type:"POST",
			data:{"name":"oscar","age":20},
			success:function(data){
				alert(data.name);
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		});
	}
</script>