那些年我还在学习Ajax 学习笔记

babys慧儿

babys慧儿

2016-02-19 10:16

下面,图老师小编带您去了解一下那些年我还在学习Ajax 学习笔记,生活就是不断的发现新事物,get新技能~
通俗的说,Ajax就是一种网页无刷技术,以提高用户体验,Ajax并不是什么新的技术,只是在那些年才火了起来(Ajax火起来时,哥只知道聊QQ),所以它就备受观注;当然,那些年就开始学习了。
一、完成Ajax请求
1、 在完成这个请求之前,先来了解一下Ajax是什么,它的全名叫异步的javascript与、XML,从名称可以看出,它与javascript和XML有不解之缘,Ajax使用XML地HTTP请求,通过浏览器建立的xmlHttpRequest对象,异步的向服务器发送请求,服务器处理请求后,将响应通过xmlHttp.responseText属性返回给javascript函数处理数据,进一步使用javascript处理DOM,完成页面的局部更新。
2、 代码示例,使用XMLHttpRequest完成请求
代码:JS:
代码如下:

script type="text/javascript"
//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");
}
/script

Handler.ashx:
代码如下:

%@ WebHandler Language="C#" Class="Handler" %
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;
}
}
}

效果:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)二、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的日子。
展开更多 50%)
分享

猜你喜欢

那些年我还在学习Ajax 学习笔记

Web开发
那些年我还在学习Ajax 学习笔记

java学习经验 Ajax 学习笔记

Web开发
java学习经验 Ajax 学习笔记

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Ajax 框架学习笔记

Web开发
Ajax 框架学习笔记

AJax 学习笔记一(XMLHTTPRequest对象)

Web开发
AJax 学习笔记一(XMLHTTPRequest对象)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

AJax 学习笔记二(onreadystatechange的作用)

Web开发
AJax 学习笔记二(onreadystatechange的作用)

揭开AJAX神秘的面纱(AJAX个人学习笔记)

Web开发
揭开AJAX神秘的面纱(AJAX个人学习笔记)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Sql Server datetime问题

Sql Server datetime问题

检测八位数字是否为有效日期的正则

检测八位数字是否为有效日期的正则
下拉加载更多内容 ↓