JavaScript之Ajax(一)创建Ajax对象
// 支持浏览器的源码
function AjaxObject() {
var AjaxRequest; // 缓存XHR对象便于 Ajax 使用 try {
// Opera 8.0+, Firefox, Safari
AjaxRequest = new XMLHttpRequest();
} catch (e) { // Internet Explorer Browsers
try {
AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// 错误处理
throw new Error("Your browser broke!");
return false;
}
}
} return AjaxRequest;
}
测试函数:
function validateUserId() {
AjaxFunction(); // 这里的 processRequest() 就是回调函数
AjaxRequest.onreadystatechange = processRequest; if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
alert(unescape(target.value)); //test:解码
AjaxRequest.open("GET", url, true);
AjaxRequest.send(null);
} function processRequest(req) {
if (req.readyState == ) {
if (req.status == ) {
var message = "Hello world";
alert(message);
setMessageUsingDOM(message);
//...
}
}
}
//引文:http://caibaojian.com/ajax-jsonp.html
ajax({
url: "./TestXHR.aspx", //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
},
fail: function (status) {
// 此处放失败后执行的代码
}
}); function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data); //创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
} //连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}
function ajax(src,data_,method){
//创建并调用ajax
htmlobj = $.ajax({
url : src,
asyc : false,
type : method,
data : data_,//发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。【Eg:{ "id": "value" }, //参数值】
dataType : "json",//预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递
contentType:"application/x-www-form-urlencoded",
complete : function(data) {
try{
// alert("ajax:data:"+data);//test
var jsonData = eval("(" + data.responseText + ")");
}catch(error){
$("#ajax_info").css({"padding":"10px","bakcground":"#ccc","color":"red","font-size":"1.6em"}); $("#ajax_info").html(data.responseText);
// alert(error.message);
$("h3.box-title").css({"background-color":"white","color":"#ccc"});//防止上述文档改变部分的页面样式
return;
} // alert(jsonData.msg);
if(jsonData.msg=="OK"){//如果数据库中删除成功
//删除tr文本节点
alert(jsonData.msg_cont);
}else{
alert(jsonData.msg_cont);
}
}
});//htmlobj----end
}
JavaScript之Ajax(一)创建Ajax对象的更多相关文章
- javascript飞机大战-----005创建子弹对象2
子弹销毁 /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this. ...
- javascript飞机大战-----004创建子弹对象
/* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this.l = l ...
- javascript - 封装原生js实现ajax
1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...
- Ajax--Ajax基于原生javascript:创建Ajax对象、链接服务器、发送请求、接受响应结果
Ajax概述 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 同步请求: 请求是由浏览器发送 页面会刷新 异步请求: 请求是由浏览器的一 ...
- AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject ...
- 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
- 创建ajax对象并兼容多个浏览器方法简单记录
这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下<script> function createAjax(){ var request=false; //win ...
- Ajax学习系列——创建XMLHttpRequest对象
Ajax - 创建XMLHttpRequest对象 首先介绍什么是XMLHttpRequest: XMLHttpRequest是Ajax的基础.中文可以解释为可扩展超文本传输请求.术语缩写为XHR. ...
- Ajax 学习之创建XMLHttpRequest对象------Ajax的核心
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- BZOJ3110[Zjoi2013]K大数查询——权值线段树套线段树
题目描述 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c如果是2 a b c形式,表示询问从第a个位置到第b个位置,第C大的数是 ...
- Educational Codeforces Round 58 Div. 2 自闭记
明明多个几秒就能场上AK了.自闭. A:签到. #include<iostream> #include<cstdio> #include<cmath> #inclu ...
- jQuery文档处理总结
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8&quo ...
- BZOJ1002 [FJOI2007] 轮状病毒 【递推】
题目分析: 推基尔霍夫矩阵后可以发现递推式 代码: n = input() f0 = 1 f1 = 5 f3 = 0 if n == 1: print f0 elif n == 2: print f1 ...
- HDU1069 最长上升子序列
emm....矩形嵌套 还记得吗....就是它... 直接贴代码了.... import java.util.ArrayList; import java.util.Arrays; import ja ...
- MT【217】韦达定理应用
若2018次方程$x^{2018}-4036x^{2017}+a_{2016}x^{2016}+\cdots+a_1x+a_0=0$ 有2018个正实数, 则对于所有可能的方程$\sum\limits ...
- 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS
返回 自学工业控制网络之路 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS 工业控制系统是对诸如图像.语音信号等大数据量.高速率传输的要求,又催生了当前在商业领域风靡的以太网与 ...
- Mysql插入、替换和无视
在现实的生产环境下,通常我们都会遇到这样的应用场景,需要我们更新数据.替换数据,若存在则不操作. insert into表示插入数据,数据库会检查主键,如果出现重复会报错: replace into表 ...
- 手动实现staticmethod和classmethod装饰器
首先,staticmethod和classmethod装饰器是通过非数据描述符实现的.用法简单,这里就不细说了. 这里主要分析一下staticmethod和classmethod是如何通过描述符实现的 ...