(转)原生ajax的写法

1.创建XMLHttpRequest对象

function createXMLHTTPRequest() {
                 //1.创建XMLHttpRequest对象
                 //这是XMLHttpReuquest对象无部使用中最复杂的一步
                 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
                 var xmlHttpRequest;
                 if (window.XMLHttpRequest) {
                     //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
                    xmlHttpRequest = new XMLHttpRequest();
                     //针对某些特定版本的mozillar浏览器的BUG进行修正
                     if (xmlHttpRequest.overrideMimeType) {
                         xmlHttpRequest.overrideMimeType("text/xml");
                     }
                 } else if (window.ActiveXObject) {
                     //针对IE6,IE5.5,IE5
                     //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
                     //排在前面的版本较新
                     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
                     for ( var i = 0; i < activexName.length; i++) {
                         try {
                             //取出一个控件名进行创建,如果创建成功就终止循环
                             //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
                            xmlHttpRequest = new ActiveXObject(activexName[i]);
                            if(xmlHttpRequest){
                                break;
                            }
                         } catch (e) {
                         }
                     }
                 }
                 return xmlHttpRequest;
             }

2.get请求

function get(){
    var req = createXMLHTTPRequest();
    if(req){
        req.open("GET", "http://test.com/?keywords=手机", true);
        req.onreadystatechange = function(){
            if(req.readyState == 4){
                if(req.status == 200){
                    alert("success");
                }else{
                    alert("error");
                }
            }
        }
        req.send(null);
    }
}

3.post请求

 function post(){
    var req = createXMLHTTPRequest();
    if(req){
        req.open("POST", "http://test.com/", true);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");
        req.send("keywords=手机");
        req.onreadystatechange = function(){
            if(req.readyState == 4){
                if(req.status == 200){
                    alert("success");
                }else{
                    alert("error");
                }
            }
        }
    }
}

post请求需要设置请求头

4.    readyState与status:

readyState有五种状态:

  0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
  1 (载入):已经调用open() 方法,但尚未发送请求;
  2 (载入完成): 请求已经发送完成;
  3 (交互):可以接收到部分响应数据;
  4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
  100——客户必须继续发出请求
  101——客户要求服务器根据请求转换HTTP协议版本
  200——成功
  201——提示知道新文件的URL
  300——请求的资源可在多处得到
  301——删除请求数据
  404——没有发现文件、查询或URl
  500——服务器产生内部错误

  

时间: 2024-10-10 22:59:54

(转)原生ajax的写法的相关文章

jQuery_review之 原生Ajax的写法

最低层的ajax的实现是基于浏览器的一个标准,就是XMLHttpRequest对象,这种对象在MS浏览器上面的实现与其他浏览器上面的实现是不一样的.尽管现在非常多的第三方框架采用"模板模式"封装了如何获取XMLHttpRequest对象以及如何发送和处理中间出现的异常,但是还是非常有必要对ajax进行一次复习,这样才能在看其他的方法的时候温故而知新的效果. 编写原生的ajax的代码,需要需要采用的步骤是,首先,我们应当在function中定义一个XMLHttpRequest的变量对象,

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

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

说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻了一下,一共十天的课程,我搞不好大半年就看了6天的.. 3. 总而言之,这次的笔记是用JavaScript的原生ajax操作,应该只是了解写法吧,因为下一讲就是jQuery封装好的ajax操作了. Ajax_Get.aspx: 1 <%@ Page Language="C#" Aut

面试时怎样回答:你对原生ajax的理解

很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些,不过可以配置的参数不止这些 $.ajax({ url:'',//请求文件路径 type:'',//请求方式GET POST data:{},//要发给服务器的数据参数 dataType:'',//希望接口返回的数据格式json,string等等 success:function(){ // 请求成

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

JavaScript的原生Ajax解析

通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了.  笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2   一.JavaScript原生ajax1.原生ajax代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &