AJAX 的操作和调用分分快三计划

作者:分分快三计划

将原生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;
                }
            }

      4  ajax接受完毕数据

//1、创建一个ajax对象

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")
                }
            });

 

<html>
    <head>
    <script>
            // ajax封装函数
        function ajax(method,url,data,asyc,success){
            // 创建xmlhttp协议对象
            var http_request= false;
            if(window.XMLHttpRequest) { //Mozilla 浏览器   
                http_request = new XMLHttpRequest();
            }else if (window.ActiveXObject) { // IE浏览器 
                try {   
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");   
                } catch (es) {   
                    try {   
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");   
                    } catch (es) {}   
                }   
            }
            http_request.onreadystatechange = check;
            // GET方式提交
            if(method.toUpperCase() == "GET"){
                http_request.open(method,url "?random=" Math.random() "&" data,asyc);
                http_request.send();
            }
            // POST方式提交
            if(method.toUpperCase() == "POST"){
                http_request.open(method,url,asyc);
                // 设置xmlhttp请求的头信息  变量=值&变量=值
                http_request.setRequestHeader("content-Type","application/x-www-form-urlencoded");
                http_request.send("random=" Math.random() "&" data);
            }

            function check(){
                if(http_request.readyState == 4 && http_request.status ==200){
                    var text = http_request.responseText;

                    if(text == "1"){
                        var text = "用户名已存在";
                        var color = "red";
                    }else{
                        var text = "用户名可用";
                        var color = "green";
                    }
                    info.innerHTML = text;
                    info.style.color = color;
                }
            }
        }
    </script>
    </head>
    <body>
    </body>
</html>

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

    浏览器端:JavaScript CSS HTML

  异步js:js的代码都是至到而下执行的,如果一块代码没有执行完毕,那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行

      3  ajax已经发送数据,还没有接受完数据

  4、等待服务器响应 等待

    发送和接受过程中不能有错误

  18

    提交方式:  GET/POST

var val=inputs[0].value;

    无刷新分页,滚动分页加载,微博异步数据发布

}else{

    GET: send无参数

inputs[2].onclick=function(){

  【user.html】  #用户名在线监测user.html  user.php    user表 pdo操作数据库# 

  js与后端进行数据交互的一种技术,通过请求协商好的接口,来获取到想要的数据

    ajax对象.onreadystatechange = 方法名;

};

ajax数据处理流程:

}

  设置监视句柄:监控整个的ajax数据处理流程

例:

  数据第二次提交时,如果提交的数据已经提交过,ajax引擎有匹配的返回数据,那么ajax引擎则不会再向服务器提交数据,而会从ajax引擎直接将原来缓存的数据直接返回。

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

    体验好

var ajax=new XMLHttpRequest;

    ajax对象.open(“提交的方式”,”提交页面和数据”,同步/异步)

//console.log(typeof ajax.responseText); //string

      POST: 提交的页面

  Ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

      GET: 比如  index.php?m=news&username=tom

};

  FF: xmlhttprequest对象(类)

};

  接受数据:

var ajax=new XMLHttpRequest;

 

var val=inputs[0].value;

  创建xmlhttp协议对象:

ajax对象   XMLHttpRequest

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

};

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

//3、发送请求

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

  2、填写请求地址 输入号码

    同步/异步: true:异步   false:同步

var ajax=null;

 

alert(ajax);

  准备发送的数据:

var span=document.querySelector("span");

  数据提交服务器,服务器处理完毕后,会将数据通过xmlhttp协议对象返回到浏览器中,ajax引擎会将返回的数据和提交的数据匹配,然后缓存到ajax引擎中,然后js从ajax引擎中获取数据.

if(result.code==0){

      1  ajax对象创建成功,还没有准备发送的数据

*/

    readyState的状态数值,每更改一次,都会触发一次的onreadystatechange

//5、接收数据

  ajax数据处理流程:

};

  IE: activeXobject插件 IE8上用的是FF系列的xmlhttprequest对象

}

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

//4、等待服务器响应

    中间:xmlhttp协议

//2、填写请求地址

      同步:数据一次性提交,一次性接收(多个ajax挨个提交接收)

//2、填写请求地址

    ajax对象.send([数据]);

var span=document.querySelector("span");

 

/*var ajax=new XMLHttpRequest;

 

//span.innerHTML=ajax.responseText;

    ajax对象.responseText;     #返回的是服务器返回的数据#

window.onload=function(){

 

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

  ajax能做什么:

//4、等待服务器响应

    ajax聊天室

var result=JSON.parse(ajax.responseText);

    POST: send中放置的时post提交的数据,并且提交的是字符串

ajax.onload=function(){

<?php echo $_GET['uname']?>

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

      异步:数据一边提交,一边接收(多个ajax可能一起提交)

inputs[2].onclick=function(){

  监视代码中:

//3、发送请求

    提交的页面和数据:

ajax.send();

    页面实现的效果是局部刷新,这种效果都是ajax操作的

  1、创建一个ajax对象 买了一个电话

ajax操作步骤:

  1. 优点

  ajax优点:

用户名:

    ajax对象.status = 200  

ajax.onload=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

//ajax请求过来的数据都是字符串,它不能用对象的操作方法 直接操作

    减少了服务器和数据库的读写压力

};

    200:数据发送和接受无错误

/*

  【user.php】

*

      2  ajax发送的数据已经准备完毕,还没有发送

* var ajax=new XMLHttpRequest;

AJAX(异步数据处理): Asynchronous (异步)的JavaScript  And  XML ( 局部刷新技术 )

  356985332

      0  未创建ajax对象

  kaivon@126.com

      不同的浏览器状态不同,有的是1,4有的是1234

  XML:存储数据的一种格式

  发送数据:

ajax请求后响应返回的结果

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

ajax=new ActiveXObject('Microsoft.XMLHTTP');

  1.  ajax到底能干嘛

}else{

//console.log(result)

  3、发送请求 拨号

ajax概念

用户名:

  //把请求过来的数据转换成对象

  陈学辉

if(window.XMLHttpRequest){

密码:

  5、接收数据 通话

window.onload=function(){

span.innerHTML=ajax.responseText;

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

alert(ajax); //在IE6下会报错*/

ajax.send();

alert('注册吧,你还真蒙对了');

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

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

密码:

//5、接收数据

alert('换一个吧');

ajax数据交互流程

ajax=new XMLHttpRequest;

例:

//1、创建一个ajax对象

1.概念:

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本 Ajax XML 异步刷新