自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢?下面和大家分享javascript实现原生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的更多相关文章

  1. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  2. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  3. JavaScript的原生Ajax解析

    通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...

  4. javascript实现原生ajax的方法

    <script> var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = ...

  5. javascript js原生ajax post请求 实例

    HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...

  6. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  7. ASP.NET学习笔记(5)——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

随机推荐

  1. Ubuntu 14.04 安装gstreamer0.10-ffmpeg

    sudo apt-add-repository ppa:mc3man/trusty-media sudo apt-get update sudo apt-get install -y gstreame ...

  2. Linux 入门记录:五、vi、vim 编辑器

    一.vi.vim编辑器 vi 是一个命令行界面下的文本编辑工具,最早在 1976 年由 Bill Joy 开发.当时名字叫做 ex.vi 支持绝大多数操作系统(最早在类 Unix 操作系统的 BSD上 ...

  3. python基础===一道小学奥数题的解法

    今早在博客园和大家分享了一道昨晚微博中看到的小学奥数题,后来有朋友给出了答案.然后我尝试用python解答它. 原题是这样的: 数学题:好事好 + 要做好 = 要做好事,求 “好.事.做.要”的值分别 ...

  4. hardseed

    hardseed https://github.com/yangyangwithgnu/hardseed

  5. MongoDB的安装配置、基本操作及Perl操作MongoDB

    MongoDB的安装配置.基本操作及Perl操作MongoDB http://www.myhack58.com/Article/60/63/2014/42353.htm

  6. 关于c++的string的operator =

    在 c++ primer 5 中在说到string的章节里面有这样一句话: string s5 = "hiya"; // copy initialization 也就是说,这里说上 ...

  7. django “如何”系列7:错误汇报

    当你正在运行一个公共的站点的时候,你应该关掉DEBUG设置.这将使你的服务器运行的更快,同时也能预防别有用心的用户从你的错误页面看到你应用的一些详细配置信息.然而,当debug为false的时候,你将 ...

  8. vue 全局配置键盘事件

    在main.js配置   Vue.config.keyCodes.f1 = 112 然后可以在页面上@keyup.f12='demo' demo(){ console.log('demo')}

  9. php上传文件常见错误

    今天在文件上传过程中遇到的文件上传不过去,和网页报错,最后经查看总结有以下几个方面 上传文件错误码 error=0 正常上传 error=1 上传的大小超过了input[type=file]的文件上传 ...

  10. java中的object... args参数

    关于java方法中Object... args参数的含义 在阅读google发布的volley源码时,突然看到一个方法中存在这样的写法,如 :v(String format, Object... ar ...