xml地图|网站地图|网站标签 [设为首页] [加入收藏]

的操作和调用,封装原生ajax

来源:http://www.ccidsi.com 作者:最新解决方案 人气:53 发布时间:2019-05-06
摘要:将原生ajax进行打包 function ajax() { var ajaxData = { type: arguments[0].type || "GET", url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "text", con

将原生ajax进行打包

function ajax() {
                var ajaxData = {
                    type: arguments[0].type || "GET",
                    url: arguments[0].url || "",
                    async: arguments[0].async || "true",
                    data: arguments[0].data || null,
                    dataType: arguments[0].dataType || "text",
                    contentType: arguments[0].contentType || "application/x-www-form-urlencoded",
                    beforeSend: arguments[0].beforeSend || function() {},
                    success: arguments[0].success || function() {},
                    error: arguments[0].error || function() {}
                }
                ajaxData.beforeSend()
                var xhr = createxmlHttpRequest();
                xhr.responseType = ajaxData.dataType;
                xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
                xhr.setRequestHeader("Content-Type", ajaxData.contentType);
                xhr.send(convertData(ajaxData.data));
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4) {
                        if(xhr.status == 200) {
                            ajaxData.success(xhr.response)
                        } else {
                            ajaxData.error()
                        }
                    }
                }
            }

            function createxmlHttpRequest() {
                if(window.ActiveXObject) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } else if(window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                }
            }

            function convertData(data) {
                if(typeof data === 'object') {
                    var convertResult = "";
                    for(var c in data) {
                        convertResult  = c   "="   data[c]   "&";
                    }
                    convertResult = convertResult.substring(0, convertResult.length - 1)
                    return convertResult;
                } else {
                    return data;
                }
            }

ajax概念

AJAX(异步数据管理): Asynchronous (异步)的JavaScript  And  XML ( 局地刷新本事 )

ajax完结,写起来和jQuery大约

ajax({
                type: "POST",
                url: "http://share.vr39.com/rest/link/importUserPanoramData",
                dataType: "json",
                data: {
                    "viewUuid": data
                },
                beforeSend: function() {
                    //some js code 
                },
                success: function(msg) {
                    alert(msg.message)
                },
                error: function() {
                    alert("error")
                }
            });

 

1.概念:

  ajax能做什么:

  Ajax是1种技艺方案,但并不是一种新技术。它依靠的是存活的CSS/HTML/Javascript,而里边最宗旨的借助是浏览器提供的XMLHttpRequest对象,是其一指标使得浏览器能够发生HTTP请求与接收HTTP响应。

    页面完毕的效率是局部刷新,那种效果都以ajax操作的

  ajax:Asynchronous JavaScript and XML(异步js和XML)

    用户名在线监测,搜索提示等等

  异步js:js的代码都以致到而下实施的,若是一块代码未有奉行完毕,那背后的代码就不会实行。异步便是ajax可以产生不按梯次推行

    无刷新分页,滚动分页加载,新浪异步数据发表

  XML:存款和储蓄数据的一种格式

    ajax聊天室

  陈学辉

  ajax优点:

  18

    速度快:ajax引擎缓存了重复提交的数量

  356985332

    体验好

  kaivon@126.com

    收缩了服务器和数据库的读写压力

  ajax不光能够管理XML格式的数据,还足以管理json、数组、字符串类型的数量

  ajax数据处理流程:

  1.  ajax到底能干嘛

    服务器端:  PHP MYSQL EMAIL(.net,java....)    m=news

  js与后端举办多少交互的1种本领,通过请求协商好的接口,来获取到想要的多少

    中间:xmlhttp协议

  1. 优点

    浏览器端:JavaScript CSS HTML

  传输数据时候会在本页面请求服务器,不用跳转页面,从而缓和服务器压力。做到实时验证,收缩用户返工率并且优化用户体验

 

ajax数据交互流程

ajax数据管理流程:

  一、创制二个ajax对象 买了3个对讲机

  JavaScript 获得表单中的数据,将须要提交的数目传递给ajax引擎(xmlhttp协议的解析器)ajax引擎会缓存用户提交的数额,并且将急需付出的数额进行提交。

  二、填写请求地址 输入编号

  数据提交服务器,服务器管理完结后,会将数据经过xmlhttp协议对象回来到浏览器中,ajax引擎会将赶回的多寡和付出的多寡相配,然后缓存到ajax引擎中,然后js从ajax引擎中获得数据.

  三、发送请求 拨号

  数据第二遍提交时,如若提交的数据已经付出过,ajax引擎有卓绝的回到数据,那么ajax引擎则不会再向服务器交由数据,而会从ajax引擎间接将原来缓存的数码间接再次回到。

  四、等待服务器响应 等待

 

  5、接收数据 通话

ajax操作步骤:

例:

  创立xmlhttp协议对象:

window.onload=function(){

  IE: activeXobject插件 IE八上用的是FF类别的xmlhttprequest对象

var inputs=document.querySelectorAll("input");

  FF: xmlhttprequest对象(类)

inputs[2].onclick=function(){

var http_request= false;
    if(window.XMLHttpRequest) { //FF Chrome 浏览器  
        http_request = new XMLHttpRequest(); 
    }else if (window.ActiveXObject) { // IE浏览器  IE9 以下
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");  
        } catch (es) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");  
            } catch (es) {}
        }
    }
IETester

var val=inputs[0].value;

 

//一、创制几个ajax对象

  设置监视句柄:监察和控制全数的ajax数据管理流程

var ajax=new XMLHttpRequest;

    readyState: 获取当前ajax的管理状态 

//贰、填写请求地址

      区别的浏览器状态分裂,有的是壹,4有的是1234

ajax.open('get','php/get.php?user=' val,true);

      0  未创建ajax对象

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:的操作和调用,封装原生ajax

关键词: 68399皇家赌场 日记本 XML AJAX 异步刷新

上一篇:纯CSS3实现不错的表单验证效果

下一篇:没有了

最火资讯