对js原生ajax与jQuery ajax进行封装

发布者: superzhang | 发布时间:2017-11-25

原生ajax的封装

/**

* AJAX函数封装

* @param {string} url 请求地址（必须）

* @param {object} options 发送请求的选项参数

* @config {string} [options.type] 请求发送的类型。默认为GET。

* @config {Object} [options.data] 需要发送的数据。

* @config {Function} [options.onsuccess] 请求成功时触发，function(oAjax.responseText, oAjax)。（必须）

* @config {Function} [options.onfail] 请求失败时触发，function(oAjax)。(oAJax为XMLHttpRequest对象)

*

*@returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象

*/

function ajax(url, options) {

//1.创建ajax对象

var oAjax = null;

/**

* 此处必须

想读更多 ->

AJAX 实例

发布者: superzhang | 发布时间:2017-11-25

为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:

AJAX 实例

实例

使用 AJAX 修改该文本内容

修改内容

AJAX 实例

AJAX 实例解析

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<!DOCTYPE html>

<html>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

想读更多 ->

框架基础：ajax设计方案（修改完善）

发布者: superzhang | 发布时间:2017-11-25

框架基础：ajax设计方案（修改完善）

框架基础：ajax设计方案

来源：http://www.cnblogs.com/GerryOfZhong/p/6115849.html

作者：半个诗人

报告，我要说话！xp被历史淘汰了，IE6 say goodbye了，太TM开心了，从此不要兼容IE6了，哈哈哈哈哈哈

报告，我要说话！IE这sb为啥不早点被杀掉呢，找工作听说要兼容IE，立马软了，唉唉唉唉唉唉

报告，我要说话！Jquery太丰富了，老子只用了几个功能，妈的，太不划算了，啊啊啊啊啊啊

......

好了，言归正传。对于想到整理ajax设计方案，原因如下：

从资源合理利用的角度以及网站优化角度去想，每次为了那几个功能，去引用一个框架，不划算

拜读了w3c的ajax的设计方案，包括level1和level2的规范，有种豁然开朗的感觉

有朋友遇到ajax的跨域方案，各种纠结在心里，导致

想读更多 ->

AJAX请求方式详解

发布者: superzhang | 发布时间:2017-11-25

HTTP METHOD：客户端向服务器端发送请求的方式。

以下请求方式都可以向服务器传递数据，也可以获取数据。

1、GET请求

一般应用于从服务器获取数据,如果get请求给服务器传递内容，一般使用url问号传参的方式。

2、POST请求

一般应用于向服务器推送数据，post请求给服务器传递内容，一般使用请求主体的方式传递给服务器。

3、PUT请求

一般应用于给服务器上增加资源文件（上传图片功能）。

4、DELETE请求

一般应用于从服务器上删除文件。

5、HEAD请求

一般应用于获取服务器的响应头信息。

AJAX请求方式详解

想读更多 ->

原生ajax封装

发布者: superzhang | 发布时间:2017-11-25

1.ajax简述：ajax通信是一种页面无刷新技术，即无需刷新页面就可以从服务器取得数据，但不一定是xml数据。最大的好处就是给用户带来了更好的用户体验，就目前来说，熟练的运用ajax已经成为了web开发人员必备的一种技能。

原生ajax封装

2. XMLHttpRequest对象

可以说ajax的核心对象就是XMLHttpRequest对象，不过浏览器对其实现不同，在IE中xhr对象是通过MSXML库中的ActiveX对象实现的，MSXML库存在三种不同的xhr对象，即MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp.6.0，除此之外在IE7+和其他浏览器中可以使用XMLHttpRequest构造函数：var xhr = new XMLHttpRequest(); 来创建xhr对象。考虑到兼容性，最好是编写一个函数来封装：

AJAX ASP/PHP 实例

实例解析 - showHint() 函数

当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：

function showHint(str)

{

var xmlhttp;

if (str.length==0)

{

document.getElementById("txtHint").innerHTML="";

ret

想读更多 ->

浅析Ajax：GET与POST

发布者: superzhang | 发布时间:2017-11-25

Asynchronous Javascript And XML

异步的JavaScript和XML；

作用：与服务端交互，读取文件

浅析Ajax：GET与POST

实现所使用到的类：

XMLHttpRequest：不兼容IE5、IE6；

ActiveXObject：兼容IE5、IE6；

客户端服务端通信是通过http这个协议进行通信的，http有两个常用的方法（GET/POST）：

1.GET : 参数传到URL里面；

使用?把接口地址跟参数隔开；多个参数使用&隔开。

2.POST：数据传输到body体里面；

传输的数据相对安全；传输的数据没有大小的限制。

（不常用）

3.DELETE

4.PUT

JS中以GET方式发送一个请求；

var req = new XMLHttpRequest();

req.open("GET","xxx");

想读更多 ->

AJAX XML 实例

发布者: superzhang | 发布时间:2017-11-25

AJAX 可用来与 XML 文件进行交互式通信。

AJAX XML 实例

下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息：

实例

Get CD info

AJAX XML 实例

实例解析 - loadXMLDoc() 函数

当用户点击上面的"获得 CD 信息"这个按钮，就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表

想读更多 ->

你真正的了解Ajax？Ajax技术简述

发布者: superzhang | 发布时间:2017-11-25

Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax并没有创造出某种具体的新技术，它所使用的大多数技术都是在很多年以前就已经存在了，然而Ajax以一种崭新的方式来使用所有的这些技术，使得古老的B/S方式的Web开发焕发了新的活力，迎来了第二个春天。

具体来说，Ajax基于下列这些核心技术:

XHTML:对应W3C的XHTML规范，目前是XHTML1.0。

CSS:对应W3C的CSS规范，目前是CSS2.0。

DOM:这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中。

JavaScript:对应于ECMA的ECMAScript规范

XML:对应W3C的XML DOM、XSLT、XPath等规范。

XMLHttpRequest:对应WhatWG的Web Applications1.0规范(-apps/current-work/)的一部分

可以看出，除了XMLHttpReq

想读更多 ->

Bootstarp-table 插件服务器分页操作（ajax）

发布者: superzhang | 发布时间:2017-11-25

关于Bootstarp-table 插件服务器分页，网上教程有很多，但都说得没有一笔过，不知所云，特别是后台的参数获取，更是精简，今天我从自己项目中的服务器分页详细介绍如何分页（ThinkPHP3.2.3框架）：

一、前端 JS 初始化参数设置

queryParamsType:'limit', //查询参数组织方式（可不要，系统默认就是limit）queryParams: function (params) {return params;}, // 参数 limit和offsetsidePagination:'server', //指定服务器端分页

说明：参数 limit 其实传递pageNumber, 参数 offset 传递偏移量（即分页数），我之前是使用pageSize这个参数的，也可以传，但永远是全部数据加载和不能分页，后来调试发觉，就是因为offset这个值，我才能后台分页数据；

method: 'get',contentType: "application/x-www-form-urlencoded", // 如果 method 为 post,必要此参数，否则后台接收不到参数，如果为get，可以不需要

这两个设置必须；

如果按此初始化后，就可以获取到参数，如图