AJAX原生JavaScript写法

GET方式

 1                 //创建XMLHttpRequest对象,为考虑兼容性问题,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象
 2                 var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
 3
 4                 //设定请求的类型,服务器URL,以及是否异步处理
 5                 ajax.open("get","test.ashx?name=jcx&id="+new Date(),true);
 6
 7                 ajax.onreadystatechange=function()
 8                 {
 9                     //4:请求已完成,且响应已就绪
10                     if(ajax.readyState==4)
11                     {
12                         //200:成功
13                         if(ajax.status==200)
14                         {
15                             //处理结果
16                             alert(ajax.responseText);
17                         }else
18                         {
19                         alert("AJAX服务器返回错误!");
20                         }
21                     }
22
23                 }
24
25                 //将请求发送到服务器
26                 ajax.send();


POST方式

 1    var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
 2
 3             ajax.open("post", "test.ashx", true);
 4
 5             ajax.onreadystatechange = function () {
 6                 if  (ajax.readyState==4)
 7                 {
 8                     if (ajax.status==200) {
 9                         alert(ajax.responseText);
10                     }
11                 }
12             }
13
14             ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
15             ajax.send("name=jcx&id=23");

//创建XMLHttpRequest对象,为考虑兼容性问题,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象
       var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
   
    //设定请求的类型,服务器URL,以及是否异步处理
    ajax.open("get","test.ashx?name=jcx&id="+new Date(),true);
    
    ajax.onreadystatechange=function()
    {
     //4:请求已完成,且响应已就绪 
     if(ajax.readyState==4)
     {
      //200:成功
      if(ajax.status==200)
      {
       //处理结果
       alert(ajax.responseText);
      }else
      {
      alert("AJAX服务器返回错误!");
      }
     }
    
    }

//将请求发送到服务器
    ajax.send();

时间: 2024-11-08 21:23:47

AJAX原生JavaScript写法的相关文章

ajax的jquery写法和原生写法

一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 . 二.ajax的缺陷 AJAX大量使用了JavaScript和AJAX引擎,而这个取决于浏览器的支持.IE5.0及以上.Mozilla1.0.NetSc

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scro

使用原生JavaScript发送ajax请求

关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据 方便测试 步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件   5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器 下面来一个小demo1做一

用原生JavaScript写AJAX

//原生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 = func

原生javaScript完成Ajax请求

使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; if(windoe.XMLHtprequest){ request=new XMLHttprequest(); }else{ request = new ActiveXObject(); } function success(text) { var textarea = document.getEle

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

原生javascript解析xml文档

之前写过一篇 <javascript/jQuery解析或转换json和xml>链接是http://my.oschina.net/ososchina/blog/343748,这篇博客详细解释了json使用 JSON.js  window.eval() ,jQuery 与字符串互相转换的方法 ,顺便也说了一点jQuery解析xml文档的方法,这里着重论述javascript操作xml. 顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在