javascript实现原生ajax

关键词：

自从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实现异步通信

AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步.以下开始简单介绍一下使用原生JS来... 查看详情

[javascript]原生js实现ajax(代码片段)

一.首先看JQuery提供的Ajax方法： $.ajax(url:,type:‘‘,dataType:‘‘,data:,success:function(),error:function()) 二.原生js实现Ajax方法： varAjax=get:function(url,fn)//XMLHttpRequest对象用于在后台与服务器交换数据var 查看详情

使用原生js实现简单的ajax

Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术。它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互，所以可以实现局部内容的刷新。ajax的实现，主要是靠javascript中的内置对象XMLHttpRequest。... 查看详情

原生js实现ajax

自从javascript有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但是有的项目不需要加载jquery这种庞大的js插件，只需要实现ajax即可。所以我们就需要自己用原生JS实现ajaxajax：一种请求数据的方式，不需要刷新整个页... 查看详情

什么是ajax与ajax原生的实现方式

一、什么是Ajax？　　Aiax：异步的Javascript和XML。作用：用于完成局部刷新XML是用于数据传输，现在开始被JSON所替代。1.1、交互方式问题　　传统的交互方式每次都必须返回整个页面，宽带，响应速度都有影响的，　　Ajax的交互... 查看详情

原生javascript+ajax

在网上找了几个帖子，但是由于水平有限，折腾了一会才实现了一个小程序。理论理解之后，加之一个实际Demo，对于新手理解ajax是很容易的。我将具体的代码都贴上，方便和我一样初次学习的人理解。操作步骤如下：首先是请... 查看详情

原生js实现ajax请求

...子：Goole搜索页面。当用户在输入框输入关键字的时候，JavaScript会把这些字符发送到服务器，然后服务器返回一个搜索建议的列表。原生的Ajax原生的Ajax请求离不开XHR对象，即XMLHttpRequest对象。所有现代浏览器都内建有这个对象... 查看详情

原生javascript完成ajax请求

使用原生javaScript完成Ajax请求，首先应该创建一个对象XMLHttprequest，考虑到兼容低版本IE浏览器，使用ActiveXObject对象，代码入下：varrequest;if(windoe.XMLHtprequest){　　request=newXMLHttprequest();}else{　　request=newActiveXObject();}functionsucce 查看详情

用原生javascript写ajax

//原生js写ajax就像打电话//打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话//ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求（告诉服务器我要什么文件）//4.接收返回值下面是原生js写ajax的具体写法<script&g... 查看详情

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

原生javascript封装ajax

functionmyajax(options){ //新建一个局部对象用来存放用户输入的各种参数 varopt={ type:options.type||"get",//获取用户输入的传输方法，可选，不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入... 查看详情

原生javascript封装ajax

functionmyajax(options){ //新建一个局部对象用来存放用户输入的各种参数 varopt={ type:options.type||"get",//获取用户输入的传输方法，可选，不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入... 查看详情

原生ajax书写

简介Ajax（Asynchronous JavaScript AndXML：异步javascript和XML）在2005年2月被提出。Ajax技术的核心是XMLHttpRequest。Ajax技术的核心就是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。 Ajax（AsynchronousJavascriptAndXML：异步Javas... 查看详情

javascript的原生ajax解析

通过JavaScript的Ajax进行详细的解析过程，从而更好的了解Jquery的Ajax。顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有需要可以直接去百度云下载，这样以后你们开发就可以直接翻笔记不用百度... 查看详情

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

原生javascript写ajax

前端JavaScript:function ajaxGet(url, obj) {    var request;    if(window.XMLHttpRequest) {         查看详情

4原生javascript封装ajax————呱呱二号

//添加事件处理functionaddEvent(obj,type,fn){ 　　if(obj.addEventListener){ 　　　　obj.addEventListener(type,fn,false); 　　}elseif(obj.attachEvent){ 　　　　obj.attachEvent(‘on‘+type,function(){ 　　　　　　fn.call(obj) 查看详情

原生js实现ajax

...能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？  JQuery提供的Ajax方法：1$.ajax({2url:,3type:‘‘,4dataType:‘‘,5data:{67},8success:function(){910},11error:function(){1213}14})　　原生js实现 查看详情