原生的ajax怎么实现的,AJAX的原生和JQuery的实现方式

AJAX介绍：

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。

同步和异步的简要讲解：

同步：客户端必须等待服务器的响应，在等待的期间客户端不能做其他操作。

异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中客户端可以进行其他的操作。

AJAX的实现方式：

原生js的实现方式

JQuery的实现方式

$.ajax();

$.get();

$post();

原生js的实现方式：

代码实现：

原生AJAX

functionfun() {

//发送异步请求

//1创建核心对象

varxmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = newXMLHttpRequest();

}

else {// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//2建立连接

/*

* 参数：

* 1请求方式：GET,POST

* GET方式请求参数在URL后面拼接。send方法后面拼接

* POST方法请求参数在send方法中定义

* 2请求URL

* 3同步或异步请求

* */xmlhttp.open("GET", "ajaxServlet?username=tom", true);

//发送请求

xmlhttp.send();

//4接收处理来自服务器的响应结果

/*

* 获取方式xmlhttp.responseText

* 什么时候获取？当服务器响应成功后再获取

* */xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var responseText =xmlhttp.responseText;

alert(responseText);

/*

* 当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

* */}

}

}

代码的相关解释：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

readyState 属性存有 XMLHttpRequest 的状态信息。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

JQuery的实现方式：($.ajax();)

代码实现：

JQuery实现AJAX

functionfun() {

$.ajax({

url: "ajaxServlet",//请求的路径

type: "GET",//请求的方式

// data:"username=jack&age=23",//传统的传输参数的方式

data: {"username": "jack", "age": 23},//使用jsession传输参数的方式

success: function (data) {//响应成功后的回调函数

alert(data);

},

error: function () {//响应出错的时候的回调函数

alert("出错了！");

},

dataType: "text"//设置接收到响应数据的格式很多时候设置json格式

});

}

JQuery的实现方式：($.get();)

代码实现：

JQuery实现AJAX_GET方法

functionfun() {

/*

* get方法里面的参数一次为：

* 1.资源路径

* 2.请求的参数列表(此处为json形式)

* 3.回调函数

* 4.设置响应的数据的数据类型

* */$.get("ajaxServlet", {username: "rose"}, function(data) {

alert(data);

}, "text");

}

JQuery的实现方式：($.post();)

代码实现：

JQuery实现AJAX_POST方法

functionfun() {

/*

* post方法里面的参数一次为：

* 1.资源路径

* 2.请求的参数列表(此处为json形式)

* 3.回调函数

* 4.设置响应的数据的数据类型

* */$.post("ajaxServlet",{username:"KOBE"},function(data) {

alert(data);

},"text");

}