自从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. 自定义shell开头PS1

    vim /etc/profile export PS1="flag:\W \u\$" \h是主机名,并不全,域 \W是当前所在目录名 \u 是当前shell用户名

  2. 【bzoj3545】peaks

    离线一下,动态开点+线段树合并,然后权值线段树上询问kth即可. #include<bits/stdc++.h> ; *; using namespace std; ; inline in ...

  3. 【hihocoder】sam1-基本概念

    这题有毒…… 原本只是想复习下sam,于是写…… 后来发现自己傻了不知道怎么维护endpos…… 一气之下直接kmp拉倒,mdzz UPD:现在我好像会维护endpos了…… #include< ...

  4. 【NOIP2016】组合数问题

    写着玩玩…… 反正超级sb题. #include<bits/stdc++.h> typedef long long ll; using namespace std; ll c[][],h[ ...

  5. Load balancer does not have available server for client:xxx

    今天在搭建一个springcloud项目在搭建以zuul为网关的时候,项目抛了一个异常, com.netflix.zuul.exception.ZuulException: Forwarding er ...

  6. 《java并发编程实战》读书笔记11--构建自定义的同步工具,条件队列,Condition,AQS

    第14章 构建自定义的同步工具 本章将介绍实现状态依赖性的各种选择,以及在使用平台提供的状态依赖机制时需要遵守的各项规则. 14.1 状态依赖性的管理 对于并发对象上依赖状态的方法,虽然有时候在前提条 ...

  7. MySQL-数据操作

    阅读目录 一 介绍 二 插入数据INSERT 三 更新数据UPDATE 四 删除数据DELETE 五 查询数据SELECT 回到顶部 一 介绍 MySQL数据操作: DML ============= ...

  8. CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

    在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  9. python模式匹配,提取指定字段

    re匹配时分多行模式(re.M)与单行模式(rs.S),多行模式是每一行单独匹配,单行模式是把所有的行当成一行来匹配. 单行模式下.可以匹配换行符. ^$匹配所有字符 import re s='1_2 ...

  10. python 正则匹配中文(unicode)(转)

    由于 需求原因,需要匹配 提取中文,大量google下,并没有我需要的.花了一个小时大概测试,此utf8中文通过,特留文.    参考: http://hi.baidu.com/nivrrex/blo ...