学有哪些好用的ajax库,那些年，我还在学习Ajax 学习笔记

通俗的说，Ajax就是一种网页无刷技术，以提高用户体验，Ajax并不是什么新的技术，只是在那些年才火了起来(Ajax火起来时，哥只知道聊QQ)，所以它就备受观注；当然，那些年就开始学习了。

一、完成Ajax请求

1、 在完成这个请求之前，先来了解一下Ajax是什么，它的全名叫异步的javascript与、XML，从名称可以看出，它与javascript和XML有不解之缘，Ajax使用XML地HTTP请求，通过浏览器建立的xmlHttpRequest对象，异步的向服务器发送请求，服务器处理请求后，将响应通过xmlHttp.responseText属性返回给javascript函数处理数据，进一步使用javascript处理DOM，完成页面的局部更新。

2、 代码示例，使用XMLHttpRequest完成请求

代码：JS：

//XMLHttpRequest对象

var xmlHttp;

function buildXMLHttpRequest() {

//判断浏览器

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE

} else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //非IE

} else {

xmlHttp = NaN;

}

}

function sendRequest() {

buildXMLHttpRequest();

//Post请求

xmlHttp.open("post", "Handler.ashx", true);

xmlHttp.onreadystatechange = function() {

//判断状态

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

alert(xmlHttp.responseText);

}

}

//定义传输的文件HTTP头信息

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //采用的编码方式

xmlHttp.send("value=1");

}

Handler.ashx：

using System;

using System.Web;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

context.Response.Write("Hello World xin_ny 中文件 "+context.Request.Params["value"]);

}

public bool IsReusable {

get {

return false;

}

}

}

效果：

二、Jquery中的Ajax方法

记得在那些年，我还在学习Jquery中没有说到它的Ajax方法，这里就补上了，JQuery提供了很多Ajax函数，方便了开发人员的使用，不再需要开发人员创建XMLHttpRequest对象来完成请求，可直接使用JQuery库中的Ajax函数完成请求，并兼容性也较好，下面就来看一下Jquery的Ajax吧。

1、Jquery得到数据方法:load()

例：

function ajaxMethod() {

$("#spanDiv").load("DemoData.txt");

}

2、Jquery的get(url,[data],callback)方法

例：

function ajaxGet() {

//对象数据源

var obj = { first: "First", second: "Second" };

$.get(

"CallBackData.ashx", obj, function(data) {

$("#spanDiv").html(data);

});

}

3、Jquery的post(url,[data],callback,type)方法

例：

function ajaxPost() {

//对象数据源

var obj = { first: "First", second: "Second" };

$.get(

"CallBackData.ashx", obj, function(data) {

$("#spanDiv").text(decodeURI(data));

});

}

4、Jquery的ajax(option)方法

例：

function ajaxAjax() {

//对象数据源

var obj = { first: "First", second: "Second" };

$.ajax({

type: "Get",

url: "CallBackData.ashx",

data: obj,

success: function(data) {

$("#spanDiv").text(decodeURI(data));

}

});

}

5、Jquery的ajaxSetup(options)方法，设置全局的ajax的配置

例：

function ajaxAjaxSetup() {

//对象数据源

var obj = { first: "First", second: "Second" };

$.ajax({

type: "Post",

url: "CallBackData.ashx",

data: obj,

success: function(data) {

$("#spanDiv").text(decodeURI(data));

}

});

}

6、Jquery的ajaxSubmit(options)方法，提交表单

总结

那些年学习Ajax,提高了用户体验，同时也减轻了服务器的负担，此文经回忆那些年学习Ajax的日子。