使用JavaScript实现ajax的实例代码

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject.具体方法如下：

var xmlHttp;
function createxmlHttpRequest()
{
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if
(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}

（1）下面使用上面创建的xmlHttp实现最简单的ajax get请求：

function doGet(url)
{
// 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function()
{
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
}
else
{
alert('fail');
}
}
}

（2）使用上面创建的xmlHttp实现最简单的ajax post请求：

function doPost(url,data)
{
// 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
createxmlHttpRequest();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
xmlHttp.onreadystatechange = function()
{
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200))
{
alert('success');
}
else
{
alert('fail');
}
}
}

以上内容是小编给大家介绍的JavaScript实现ajax的实例代码，希望对大家有所帮助，在使用过程发现有任何疑问欢迎给我留言，小编会及时回复大家的。在此小编非常感谢大家对我们网站的支持，相信我们会做的更好！

赞 (0)

相关推荐

  • node.js+Ajax实现获取HTTP服务器返回数据

    node.js+Ajax实现获取HTTP服务器返回数据

    我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HTTP响应头部中添加Access_Control_Allow_Origin字段,并且将参数指定为允许向服务器请求数据额域名+端口号(省略端口号时允许该域名下的任何端口向服务器请求数据), 静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启IIS服务,并把页面考

  • 实例详解angularjs和ajax的结合使用

    实例详解angularjs和ajax的结合使用

    这是一篇关于easyui配合ajax使用的文章,顺带介绍angularjs的使用以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈.看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥真正做的时候写那种东西 不是扯淡么 你叼你技术牛逼整站的代码你全用那种写.html js 这种东西最开始设计出来就没考虑周全就是坨屎.还好现在有各种框架 可以帮助我们更容易的把这坨屎做的更美味.也还好由于互联网事业

  • javascript结合ajax读取txt文件内容

    代码很简洁,这里就不多废话了,直接上源码 html代码 复制代码 代码如下: <!doctype html>  <html>   <head>       <meta charset="utf-8"/>       </head>       <body>           <button type="button"  onclick="show()">请求数据

  • ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先需要引入jquery.js,主要代码如下: 复制代码 代码如下: function ajax(id,pic){     //由于ThinkPHP不解析JavaScript里的ThinkPHP常量,所以需要先在这里定义. var URL='__URL__';         $.ajax({     

  • 原生Javascript封装的一个AJAX函数分享

    最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ

  • ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息

    ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息

    一.如何用AJAX调用JsonResult方法 比如FuckController中添加有个返回JsonResult类型的方法FuckJson(): 复制代码 代码如下: <span class="kwd">public<span class="pln"> <span class="typ">JsonResult<span class="pln"> <span class=&

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • ThinkPHP通过AJAX返回JSON的两种实现方法

    本文实例讲述了ThinkPHP通过AJAX返回JSON的两种实现方法.分享给大家供大家参考.具体方法如下: 方法一: php代码如下: 复制代码 代码如下: $arr = array( 'name'=>$picname, 'pic'=>$pics, 'size'=>$size ); $this->ajaxReturn (json_encode($arr),'JSON'); JS部分代码如下: 复制代码 代码如下: var d=eval('('+d+')');//json转成obje

  • jQuery中ajax和post处理json的不同示例对比

    近日在做门户的用户评论时,好长时间没有用jquery了正好用一下,没想到偷工用了post方法去处理ajax回调的json数据,死活取不到,后台就是有json返回了.不料这么小小一个问题挂了我好几个小时,后来我ajax方法处理,居然OK,一比较发现原来post方法回调json必须eval一下,而ajax方法做了默认处理了. 望各位小心. function haha() { jQuery.post("addComment!comment.action", function aa(data)

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • 使用JavaScript实现ajax的实例代码

    AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. 实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject.具体方法如下: var xmlHttp; function createxmlHttpRequest()

  • JavaScript+CSS相册特效实例代码

    JavaScript+CSS相册特效实例代码

    嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT

  • JavaScript实现二分查找实例代码

    二分查找的前提为:数组.有序.逻辑为:优先和数组的中间元素比较,如果等于中间元素,则直接返回.如果不等于则取半继续查找. /** * 二分查找,递归实现. * @param target * @param arr * @param start * @param end * @returns {*} */ function binarySearch(target,arr,start,end) { var start = start || 0; var end = end || arr.length

  • JavaScript判断微信浏览器实例代码

    先给大家说下我的项目需求:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打开的页面点击下载按钮下载不了 apk,后百度之,原来是微信内置浏览器屏蔽了下载链接,后面和需求方沟通,需求改为如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,否则下载不了 apk.那么该如何判断用户是否是用微信浏览器呢? 我们知道 js 可以通过 window.navigator.us

  • javascript数字验证的实例代码(推荐)

    javascript数字验证的实例代码(推荐)

    现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单, 代码如下: v

  • 用JS写的一个Ajax库(实例代码)

    myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ <span style="white-space:pre"> </span>data: {}, //参数 url: "", //请求地址 //发生错误是调用 error: function(data) { }, //请求成功调用 success: function(data){ <

  • ECHO.js 纯javascript轻量级延迟加载的实例代码

    ECHO.js 纯javascript轻量级延迟加载的实例代码

    ECHO.js 纯javascript轻量级延迟加载的实例代码 演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title> <style> .demo img { width: 736px; height: 490px;

  • JavaScript tab选项卡插件实例代码

    今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式. 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用函数写法的代码: tab.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http

  • 使用JavaScript实现alert的实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> window.alert = alert; function alert(data) { var MainDiv = document.createElement("div"), p = document.createElement("p"), AllPage = document.createElement("div"), btn = document.crea

随机推荐