关于原生AJAX和jQueryAJAX的编程

1.回顾传统Ajax开发步骤

 ①：创建xmlHttpRequest对象

 var xmlHttp = creatHttpRequest();

 ②：绑定回调函数

 xmlHttp.onreadystatechange = function(){……}

 ③：建立连接

 xmlHttp.open(“GET”,”url”);

 ④：发送数据

 xmlHttp.send(null) //GET请求

 如果是POST请求需要设置编码格式：

 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

 xmlHttp.send(“key=value?key=value”)

 ⑤：书写回调函数

 if(readyState == 4){

 if(status ==200){

 ……

 //操作xmlHttp.responseText主要针对返回HTML片段和json

 //操作xmlHttp.responseXML主要针对返回XML片段。

 }

 }

2.jQuery的Ajax开发

jQuery提供了最底层的Ajax调用方法：$.ajax

 $.ajax{

 type:”POST”

 url: “some.php”

 data: "name=John&location=Boston",

 success: function(msg){

 alert( "Data Saved: " + msg );

 }

 }

// 因为使用比较繁琐，所以在实际开发中，应用很少

为了简化Ajax开发，jQuery提供了对$.ajax（）进一步的封装方法$load、$get、$post。这三个方法不支持跨域，$getJSON、$getScript支持跨域。

①：load方法

load方法是jQuery中最为简单和常用的Ajax方法，处理HTML片段此方法最为合适。

语法

$("jquery对象").load("url","data") ;

url：Ajax访问服务器地址

data：请求参数

返回内容HTML片段，自动放入$("jquery对象")innerHTML 中(如果返回的数据需要处理，我们可以使用get或者post)

load()方法的传递参数根据参数data来自动自定。如过没有参数的传递，采用GET方式传递，否则采用POST方式

比如校验用户名是否存在

$(function(){

// 为用户名添加离焦事件

$("input[name='username']").blur(function(){

// 获得当前输入 username

var username = $(this).val();

// 提交Ajax校验

$("#info").load("/Ajax/checkUsername" , {'username': username});

});

<form>

用户名 <input type="text" name="username" /> <span id="info"></span> <br/>

密码 <input type="password" name="password"/><br/>

</form>

②：get方法和post方法

语法：

$.get/$.post("url","parameter",function(data){...});

url Ajax访问服务器地址

parameter 代表请求参数

function 回调函数 data 代表从服务器返回数据内容

这里data代表各种数据内容： HTML片段、JSON、XML

如果传递参数给服务器使用 $.post , 不需要传参数可以使用 $.get

秒客网

关于原生AJAX和jQueryAJAX的编程

1.回顾传统Ajax开发步骤

2.jQuery的Ajax开发

相关文章