AJAX 的操作和调用

Posted Shuo_128

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX 的操作和调用相关的知识,希望对你有一定的参考价值。

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

  ajax能做什么:

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

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

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

    ajax聊天室

  ajax优点:

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

    体验好

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

  ajax数据处理流程:

    服务器端:  php+mysql+EMAIL(.net,java....)    m=news

    中间:xmlhttp协议

    浏览器端:JavaScript + CSS +html

 

ajax数据处理流程:

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

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

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

 

ajax操作步骤:

  创建xmlhttp协议对象:

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

  FF: xmlhttprequest对象(类)

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数据处理流程

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

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

      0  未创建ajax对象

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

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

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

      4  ajax接受完毕数据

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

    ajax对象.onreadystatechange = 方法名;

  准备发送的数据:

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

    提交方式:  GET/POST

    提交的页面和数据:

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

      POST: 提交的页面

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

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

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

  发送数据:

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

    GET: send无参数

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

  监视代码中:

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

    ajax对象.status = 200  

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

  接受数据:

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

 

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

<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>

  【user.php】

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

 

以上是关于AJAX 的操作和调用的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

AJAX相关JS代码片段和部分浏览器模型

html 输入类型提交通常在单击时重新加载页面。此片段使输入不重新加载页面以便进行ajax调用

使用 JQuery ajax 在 DOM 操作后附加事件

使用 Jquery 的同步“Ajax”调用似乎不起作用

AJAX调用完成后的消息提示框