`
ccw5510
  • 浏览: 8061 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

我也来发一个自己做的 ajax 简单封装

Ajax浏览器PHPChrome框架 
阅读更多
我也来发一个自己做的 ajax 简单封装，望多提意见。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajax</title>
<script type="text/javascript"><!--
function Ajax() {
var xmlHttpReq = null;
if (window.XMLHttpRequest) {
  xmlHttpReq = new XMLHttpRequest();
} else {
  if (window.ActiveXObject) {
    var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP',
 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0',
 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 
 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
    for(var i=0; i<versions.length; i++) {
      try {
        xmlHttpReq = new ActiveXObject(versions[i]);
        if(xmlHttpReq) {
          break;
        }
      } catch(e) {}
    }
  }
}
	
var handler = null;
	
this.invoke = function (mode, url, value, _handler) {
  handler = _handler;
  if(mode == 'get') {
    var querystring = url+'?'+value+'&'+Math.random();
    if(window.XMLHttpRequest) {
      xmlHttpReq.open('GET', querystring);
      xmlHttpReq.onreadystatechange = this.callback;
      xmlHttpReq.send(null);
    } else {
      xmlHttpReq.open('GET', querystring, true);
      xmlHttpReq.onreadystatechange = this.callback;
      xmlHttpReq.send();
    }
  }
  else if(mode == 'post') {
    xmlHttpReq.open('POST', url);
    xmlHttpReq.onreadystatechange = this.callback;
    xmlHttpReq.setRequestHeader('Content-Type',
 'application/x-www-form-urlencoded');
    xmlHttpReq.send(value);
  }
};
	
this.callback = function () {
  if (xmlHttpReq.readyState == 4) {
    if (xmlHttpReq.status == 200) {
      handler(xmlHttpReq.responseText);
    } else {
      alert("请刷新页面！");
    }
  }
};
}

// 调用示例
new Ajax().invoke(
  "get",
  "/index.php",
  'name=hello',
  run
);

function run(response) {
  alert(response);
}
// --></script>
</head>

<body>
</body>
</html>


服务端数据返回脚本：index.php 

<?php
echo $_GET['name'];

// echo $_POST['name'];
?>


　　兼容 IE、firefox、chrome 等浏览器。

　　var querystring = url+'?'+value+'&'+Math.random();，Math.random() 主要是进行 GET 请求时为了防止缓存。

　　发送请求时，对数据最好进行 urlencode 编码。

转载地址：http://www.xhttp.cn/2010/06/18
分享到：
JavaScript 用搜索引擎引用高亮页面关键字
评论
12 楼 luciferdevil 2011-01-25  
attol 写道
最近很多帖子都想投隐藏和新手帖

怎么投 教教
11 楼 rainsilence 2011-01-25  
zhouyrt 写道
rainsilence 写道
其实ajax框架最难得部分在于timeout。你能模拟出来嘛？多浏览器下效果不一样


最难的的确是timeout。我在ajax系列之四，之五按检查超时，超时处理两部分来处理。

http://snandy.iteye.com/blog/738234
http://snandy.iteye.com/blog/738420


又开始广告了。。。
10 楼 rainsilence 2011-01-25  
LeoChowComtop 写道
rainsilence 写道
mirinda95925 写道
mayEyeInfo 写道
.....
this.invoke = function (mode, url, value, _handler) {  
31.  handler = _handler;  
32.  if(mode == 'get') {  
33.    var querystring = url+'?'+value+'&'+Math.random();  
34.    if(window.XMLHttpRequest) {  
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。

随机数还是会造成重复，还是用+new Date好些

，是否取缓存数据，作为参数传入如何？
client 的选择会更多些。。
因为有时候，缓存的更好，比如图片。。


跟你说的不是一回事
9 楼 LeoChowComtop 2011-01-25  
rainsilence 写道
mirinda95925 写道
mayEyeInfo 写道
.....
this.invoke = function (mode, url, value, _handler) {  
31.  handler = _handler;  
32.  if(mode == 'get') {  
33.    var querystring = url+'?'+value+'&'+Math.random();  
34.    if(window.XMLHttpRequest) {  
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。

随机数还是会造成重复，还是用+new Date好些

，是否取缓存数据，作为参数传入如何？
client 的选择会更多些。。
因为有时候，缓存的更好，比如图片。。
8 楼 zhouyrt 2011-01-25  
rainsilence 写道
其实ajax框架最难得部分在于timeout。你能模拟出来嘛？多浏览器下效果不一样


最难的的确是timeout。我在ajax系列之四，之五按检查超时，超时处理两部分来处理。

http://snandy.iteye.com/blog/738234
http://snandy.iteye.com/blog/738420
7 楼 夜之son 2011-01-24  
rainsilence 写道
mirinda95925 写道
mayEyeInfo 写道
.....
this.invoke = function (mode, url, value, _handler) {  
31.  handler = _handler;  
32.  if(mode == 'get') {  
33.    var querystring = url+'?'+value+'&'+Math.random();  
34.    if(window.XMLHttpRequest) {  
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。

随机数还是会造成重复，还是用+new Date好些


加时间戳一直是推荐的方式吧。
6 楼 rainsilence 2011-01-23  
其实ajax框架最难得部分在于timeout。你能模拟出来嘛？多浏览器下效果不一样
5 楼 rainsilence 2011-01-23  
mirinda95925 写道
mayEyeInfo 写道
.....
this.invoke = function (mode, url, value, _handler) {  
31.  handler = _handler;  
32.  if(mode == 'get') {  
33.    var querystring = url+'?'+value+'&'+Math.random();  
34.    if(window.XMLHttpRequest) {  
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。

随机数还是会造成重复，还是用+new Date好些
4 楼 mirinda95925 2011-01-21  
mayEyeInfo 写道
.....
this.invoke = function (mode, url, value, _handler) {  
31.  handler = _handler;  
32.  if(mode == 'get') {  
33.    var querystring = url+'?'+value+'&'+Math.random();  
34.    if(window.XMLHttpRequest) {  
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。
3 楼 flamesea 2011-01-20  
回楼上的，这是为了避免浏览器缓存造成的查询结果不变，而通过附加Math.random()来使得每次的请求不尽相同
2 楼 mayEyeInfo 2011-01-20  
.....
this.invoke = function (mode, url, value, _handler) {  
31.  handler = _handler;  
32.  if(mode == 'get') {  
33.    var querystring = url+'?'+value+'&'+Math.random();  
34.    if(window.XMLHttpRequest) {  
......
为什么要用Math.random();
求解答！！！！
1 楼 attol 2011-01-20  
最近很多帖子都想投隐藏和新手帖
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    自己用的简单封装AJAX类

    **标题解析：** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求，编写了一个简化的AJAX处理类。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，...

    Ajax 简单封装类库

    一、同一个对象可以发送多个请求，按顺序执行请求，有简单的超时机制,httpXMLRequest对象复用，无序的可以建立多个对象发送请求来实现； 二、兼容IE,FF，支持同步、异步请求； 三、测试通过：IE6+,FireFox2.0； ...

    ajax代码及简单封装

    本文将详细解析一个适用于.NET平台的AJAX代码示例及其简单封装方法。 #### 二、核心概念 1. **XMLHttpRequest对象**：在AJAX中扮演着核心角色，负责发送请求和接收响应。 2. **open()方法**：用于设置请求方式...

    简单封装Ajax

    【简单封装Ajax】这篇文章主要探讨的是如何在JavaScript中对原生的XMLHttpRequest对象进行简单的封装，以便于在实际开发中更方便地进行异步数据请求。在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种...

    ajaxTest 实用简单封装

    封装一个简单的GET请求可以这样写： ```javascript function ajaxGet(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === ...

    自己封装的一个ajax的小工具

    因此，封装一个自定义的Ajax工具，可以优化性能，提高代码的可维护性和可读性。 基于标签"ajax"、"ajax工具"、"jQuery"、"ajax实现"，我们可以推断出这个小工具可能是： 1. **Ajax请求的实现**：包括发起HTTP请求...

    简单ajax封装小工具

    本小工具就是对Ajax进行的一种简单封装，适用于那些希望进行轻量级交互、不打算使用大型JavaScript框架的场景。 Ajax的核心在于通过JavaScript与服务器进行异步通信，它允许我们向后台发送请求，获取数据，然后在...

    经典的AJAX(封装好)

    AJAX的核心是利用JavaScript创建XMLHttpRequest对象，这是一个浏览器内置的对象，它允许开发者在不刷新页面的情况下向服务器发送请求并接收响应。以下是一些关键知识点： 1. **XMLHttpRequest对象**：这是AJAX的...

    原生js的AJAX封装以及实例展示.zip

    这个压缩包"原生js的AJAX封装以及实例展示.zip"包含了对AJAX的简单封装以及一个具体的增删改查（CRUD）操作实例，这将帮助我们深入理解如何在实际项目中应用AJAX。 首先，让我们了解一下AJAX的基本原理。AJAX的核心...

    ajax封装的dll

    总之，“ajax封装的dll”是一个将Ajax功能模块化的实践，它旨在提供一种方便、高效的方式来处理Web应用程序中的异步请求。通过合理利用和管理这样的DLL，开发者可以更好地组织代码，提高开发效率，但同时也需要注意...

    JavaScript-初识ajax、ajax封装、及json简单实战案例(下).pdf

    以下是一个简单的Ajax函数封装示例： ```javascript function ajaxRequest(url, method, callback, data) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 ...

    ajax简单示例和封装库

    1. **创建XMLHttpRequest对象**：这是Ajax的核心，它是浏览器提供的一个内置对象，用于与服务器进行通信。 2. **打开连接**：调用XMLHttpRequest对象的open()方法，指定请求类型（GET或POST），URL和是否异步执行。 ...

    JavaScript封装Ajax

    以下是一个简单的示例： ```javascript function ajax(url, data, type, successCallback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status...

    小程序使用es6封装ajax源码案例

    在小程序中封装Ajax，我们可以创建一个名为`ajax.js`的模块，利用ES6的Promise和函数表达式来实现。下面是一个简单的示例： ```javascript // ajax.js export function request(url, method = 'GET', data = {}) { ...

    jQuery 封装Ajax

    它接受一个包含各种配置选项的对象作为参数，例如： ```javascript $.ajax({ url: 'http://example.com/data', type: 'GET', // 或者 'POST' dataType: 'json', // 'html', 'xml', 'script', 'jsonp' 等 data: ...

    Ajax异步处理封装

    以下是一个简单的Ajax封装示例： ```javascript function ajax(url, type, callback, data) { var xhr = new XMLHttpRequest(); xhr.open(type, url, true); // 如果是POST请求，设置请求头 if (type === '...

    Jquery 封装下的ajax异步加载

    一个简单的Servlet示例： ```java import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; public class MyServlet extends HttpServlet { protected void ...

    asp.net+ajax 制作一个简单的社区聊天室

    文件名"制作一个简单的社区聊天室（AJAX）"可能包含以下内容： - HTML/CSS文件：构成用户界面，包括输入框、发送按钮和聊天消息列表。 - JavaScript文件：包含AJAX请求和DOM操作的代码。 - ASP.NET后台代码文件（如....

    简单ajax登陆例子，新手适用

    总结来说，“简单ajax登录例子”是一个学习Ajax和Servlet结合的好起点。通过这个实例，你可以了解到如何使用Ajax实现无刷新的用户登录，以及如何在Servlet端处理这些请求。同时，这个过程也涉及到了前端与后端交互、...

    ajax简单的入门程序

    1. **创建XMLHttpRequest对象**：在所有现代浏览器中，都可以通过`new XMLHttpRequest()`来创建一个新的XMLHttpRequest实例。 2. **初始化连接**：使用`open()`方法设置请求的类型（GET、POST等）、URL以及是否异步...

Magicbox
Global site tag (gtag.js) - Google Analytics