zoukankan      html  css  js  c++  java
  • Ajax基础

    何为Ajax

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    例子:网页的验证登陆(防止自动刷新)

    AJAX = 异步 JavaScript 和 XML。

    AJAX 是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

    实例:

    修改内容:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
    
    </body>
    </html>

    操作方式

    1、js操作方式

    ①创建ajax对象

    var xhr = new XMLHttpRequest();

    ②发起请求

    xhr.open('get','fwq.php?name=zhangsan&age=123');

    xhr.open('post','index.html?name=zhangsan&age=123');

    注:两种方式get  post

    两者区别

    ① 给服务器传递数据量不同

    get最多是2k       post原则没有限制,php.ini对其限制为8M

    ② 安全方面,post传递数据较安全

    ③ 传递数据的形式不一样

    get方式在url地址后边以请求字符串形式传递参数

    http://网址/index.php?name=tom&age=23&addr=beijing

    蓝色部分就是请求字符串,就是一些-值”对,中间使用&符号连接。

    post方式是把form表单的数据给请求出来以xml形式传递给服务器

    ③传数据

    xhr.send(null);

    ④监听ajax状态

    xhr.onreadystatechange=function(){

      if(xhr.readyState == 4){

      }

    }

    状态表示

    0(为初始化)

    1(初始化)

    2(发送数据)

    3(数据传送中)

    4(完成)

    ⑤得到返回

    xhr.responseText

    2、jquery操作方式

    $ajax({

      async:true,//ajax请求方式

      url:"fuq.php",//地址

      data:{name:"zhangsan",age:12},//传值

      type:"post"//传值方式

      dataType:"text",//返回值格式

      success:function(data){

      }

    });//处理

    注:请求方式

    true(异步)    false(同步)

    异步:同一个时间点允许执行多个进程。

    同步:同一个时间点只允许执行一个进程。

    默认是true(异步)

    何时用同步

    ajax绝大多数情况下进行异步请求,但是有的时候也要使用“同步请求”(其不能被取代)。

    例如页面有两部分内容,一前一后,ajax请求和正常的html内容输出,如果html的输出内容包括ajax请求的内容,

    就需要使得ajax请求完成了再进行html内容的输出,这样就要设置两者一前一后调用(而非同时调用),此时要使用同步请求。

  • 相关阅读:
    vimrc 配置 史上最牛
    nmap 黑客 端口扫描(转)
    linux export 命令(转)
    【引用】linux下编译静态库ranlib有什么用
    vim map nmap(转)
    vim 自定义命令 自定义快捷键(转)
    vimrc初学 vim 快捷键 map(转)
    vim 取消 查找 高亮
    Java内存模型(JMM)学习总结
    Struts2和Spring整合
  • 原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9237767.html
Copyright © 2011-2022 走看看