js 原生 ajax

//js  ajax
function Ajax(url,type,data,comFun,sucFun,errFun)
{
    //1、创建XMLHttpRequest对象
    var xmlHttpRequest;

   if(window.ActiveXObject) //IE低版本
   {
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest)//Firefox等
   {
       xmlHttpRequest = new XMLHttpRequest();
   }

    //2、创建连接
    xmlHttpRequest.open(type, url, true);  

    //处理post请求参数
    var params = null;
    if(type.toLowerCase()=="post")
    {
        //post方式要设置请求类型
        xmlHttpRequest.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); 

        if(typeof data=="string")
        {
            params = data;
        }
        else
        {
            var arr = [];
            for(var k in data)
            {
                arr.push(k+"="+data[k]);
            }
            params = arr.join("&");
        }
    }
    else
    {
       //如果是get请求 send方法中的参数为null
       params = null;
    }

    //3、发送请求
    xmlHttpRequest.send(params);  

    //4、接受服务器响应结果
    xmlHttpRequest.onreadystatechange = function()
    {
        // readyState值说明
        // 0,初始化,XHR对象已经创建,还未执行open
        // 1,载入,已经调用open方法,但是还没发送请求
        // 2,载入完成,请求已经发送完成
        // 3,交互,可以接收到部分数据  

        if (xmlHttpRequest.readyState == 4) {
            //complete: 请求完成时执行的函数
            //complete();
            comFun("请求完成......");

            // status值说明
            // 200:成功
            // 404:没有发现文件、查询或URl
            // 500:服务器产生内部错误  

            if(xmlHttpRequest.status == 200)
            {
                //success: 请求成功时执行的函数
                //success();
                var text = xmlHttpRequest.responseText;
                sucFun(text);
            }
            else
            {
                //error: 请求失败时执行的函数
                //error();
                errFun("服务器错误......");
            }
        }

    }
}
时间: 2024-10-10 15:31:47

js 原生 ajax的相关文章

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) { //

Js原生Ajax和Jquery的Ajax

一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死 2.Ajax的运行原理 页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能. 二

js原生Ajax的封装与使用

一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest(); }, createIEXHR: function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, createErrorXHR: function () { alert("Your browser does n

JS原生Ajax,GET和POST

javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else

js原生ajax与jquery的ajax的用法区别

什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onreadtstatechange 每次状态改变所触发事件的时间处理程序. responseText 从服务器响应返回以字符串为形式的数据 responseXML 从服务器响应返回以XML(DOM兼容文档)数据对象 status 从服务器返回的数字代码 100-199 用于指定客户端应相应的某些动作. 2

js原生ajax请求get post笔记

开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params, callback, async) { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) { xhr = new ActiveXObject

JS原生AJAX

一.Ajax概念:局部网页实时异步刷新技术: 二.异步/同步: 同步:填完所有信息后,全部提交服务器,服务器响应后一次性返回全部: 异步:填完一条信息后,就提交服务器,服务器响应过程,依旧可以操作: 三.使用五部曲: 1.创建一个异步对象: var htmlhttp=new XMLHttpRequeset(); 2.设置请求方式和请求地址: htmlhttp.open("POST","url",true);  //post/get需要大写 3.发送请求: htmlh

js 原生 ajax 异步上传图片

<script type="text/javascript"> function upload() { var file1 = document.getElementById("file1"); postFile(file1.files[0]); } function postFile(data) { //1.创建异步对象(小浏览器) var req = new XMLHttpRequest(); //2.设置参数 req.open("post

原生JS发送Ajax请求

注意了,划重点了,这一题考不到算我输! 一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相应数据. 废话少说上代码! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0p