//原生js写ajax就像打电话

//打电话分下面4步
//1.拿出手机
//2.拨号
//3.说话
//4.听对方说话

//ajax也分下面4步
//1.创建ajax对象
//2.连接到服务器
//3.发送请求(告诉服务器我要什么文件)
//4.接收返回值

原生js写ajax的具体写法

<script>
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
//1.创建ajax对象
//只兼容非ie6的浏览器,在ie6浏览器上运行会提示没有被定义
//var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
//alert(oAjax); //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用,会报错。
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax); //鉴于上面出现的问题,可以采取下面的方法解决,用if判断是否为IE6浏览器
if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6浏览器。()里面加window的原因下面会有描述。
{
var oAjax = new XMLHttpRequest();//创建ajax对象
}
else//如果没有XMLHttpRequest,那就是IE6浏览器
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
} //2.连接服务器
//open(方法、文件名、异步传输)
//方法:
//传输方式是get方式还是post方式。
//文件名
//告诉服务器要读哪个文件
//异步传输
//异步:多件事一件一件的做
//同步:多件事情一起进行
//但是js里面的同步和异步和现实的同步异步相反。
//同步:多件事一件一件的做
//异步:多件事情一起进行
//ajax天生是用来做异步的 oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。 //3.发送请求
oAjax.send(); //4.接收返回
//客户端和服务器端有交互的时候会调用onreadystatechange
oAjax.onreadystatechange=function()
{
//oAjax.readyState //浏览器和服务器,进行到哪一步了。
//0->(未初始化):还没有调用 open() 方法。
//1->(载入):已调用 send() 方法,正在发送请求。
//2->载入完成):send() 方法完成,已收到全部响应内容。
//3->(解析):正在解析响应内容。
//4->(完成):响应内容解析完成,可以在客户端调用。
if(oAjax.readyState==4)
{
if(oAjax.status==200)//判断是否成功,如果是200,就代表成功
{
alert("成功"+oAjax.responseText);//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容
}
else
{
alert("失败");
}
}
};
}
}; /*//上面if里面需要些window的原因
//js里面的变量和属性 var a = 12;
alert(a);//页面上弹出12很正常,而实际上输出的是下面的写法,是属于window的,只是window能省就省了。
alert(window.a);//输出结果是一样的
window.alert(window.a); //想a这种全局变量实际上是winow的一个属性。
//如果不定义一个变量a直接像下面那样输出a
alert(a)//系统会报错,而不是undefind,因为没有定义变量a。
alert(window.a);//如果是这样写,系统就不会报错了,会显示undefind。 //出现上面的原因是因为直接写a从根上就找不到a,而前面加上window只是找不到window的属性a了。*/ </script>

但是,不能每次用ajax的时候都写那么多代码,要把这段ajax代码封装起来,方便使用。

封装ajax

//最后把代码封装起来,封装起来以后,要给这个函数加上一个参数url.参数是为了替换要读取的文件名
function ajax(url,fnSucc)
{
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
oAjax.open("GET",url,true);//把要读取的参数的传过来。
oAjax.send();
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
fnSucc(oAjax.responseText);//成功的时候调用这个方法
}
else
{
if(fnfiled)
{
fnField(oAjax.status);
}
}
}
};
}

将封装的ajax调用

<script src="new_ajax.js"></script>//引用封装的ajax文件
<script>
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
ajax('a.txt',function(str){//读取a.txt文件里面的内容
alert(str);//将读取的内容输出
})
}
}; </script>

用原生JavaScript写AJAX的更多相关文章

  1. 原生JavaScript写AJAX

    前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...

  2. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  3. 原生JavaScript 封装ajax

    原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...

  4. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  5. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  6. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  7. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  8. 原生javascript写自己的运动库(匀速运动篇)

    网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...

  9. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

随机推荐

  1. 修改浏览器Cookie

    Firefox:安装 Web Developer 插件,装完重启之后会出现一排新的工具栏,点击 Cookies -> Add Cookie… 即可增加/修改一个Cookie了. Opera:Op ...

  2. JavaWeb应用项目部署到云ubuntu

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6383068.html 在前面的博文中,我们已经在云主机ubuntu上搭建好jdk.tomcat以及mysql了 ...

  3. unique_ptr与std::move的使用

    形参为unique_ptr u2,而后实参为std::move(unique_ptr u1),这样会将原本u1的内存传递给u2,避免了传递拷贝.例如: void fun(std::unique_ptr ...

  4. 面向对象高级——Object类、包装类以及匿名内部类

    Object类  知识点:掌握Object类的作用.掌握Object类中toString().equal()方法的作用 ,掌握Object接收引用数据类型的操作. 假设一个类在定义时没有明白指明继承哪 ...

  5. Ubuntu18.04下使用Blender进行视频格式转换

    Ubuntu下可以使用Blender的Video Editing功能进行视频格式转换, 具体步骤: 打开Blender后, 在顶层菜单栏中, 将Choose Screen Layout修改为Video ...

  6. 给X240换上了三键触摸板

    X240自带的触摸板非常不好用, 对于我这样的指点杆重度用户, 每次要按下整块板真的是太费力了, 而且在夜里声音很吵. 在淘宝上买了三键的X250的触摸板换上了. 这是购买的触摸板的型号 换的时候, ...

  7. update pm storage

    BEGIN #Routine body goes here... INSERT INTO EMS_PM_STORAGE ( AMOID, GP_BEGIN_TIME, EMS_RECORD_TIME, ...

  8. BackgroundWorker使用方法

    在做GUI界面程序的时候,经常会遇到执行长时间方法的需求,当执行长时间方法的同时,再去点击界面,界面就会出现“卡死.假死”的现象,这是因为界面GUI线程被阻塞而导致暂时无响应.解决的方法有很多种,下面 ...

  9. Windows下node.js安装及环境配置

    1. 安装 官网下载node.js的安装版,一路next,中间可以自定义安装路径 完成后安装目录内容如下 cmd下检查是否安装成功 新版Node.js已自带npm,所以安装Node.js时会一起安装, ...

  10. lua闭包

    function MakeCounter() return function() t = t + return t end end local func = MakeCounter() , do pr ...