zoukankan      html  css  js  c++  java
  • ajax

    ajax详解

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。它并非一种新的技术,而是以下几种原有技术的结合体。

    1)   使用CSS和XHTML来表示。

    2)   使用DOM模型来交互和动态显示。

    3)   使用XMLHttpRequest来和服务器进行异步通信。

    4)   使用javascript来绑定和调用。

    通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型:

    1)   不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前还可以友好的给出一个加载提示。

    2)   不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。

    3)   不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常使用hack手段,如使用隐藏的或内嵌的框架(<iframe>标签)。

    为什么要用ajax:

            Ajax应用程序的优势在于:

            1. 通过异步模式,提升了用户体验

            2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

            3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

        AJAX最大的特点是什么。

            Ajax可以实现动态不刷新(局部刷新)

            就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

        请介绍一下XMLhttprequest对象。

            Ajax的核心是JavaScript对象XmlHttpRequest。

            该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。

            简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

            通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

        AJAX技术体系的组成部分有哪些。

            HTML,css,dom,xml,xmlHttpRequest,javascript

        Ajax请求总共有八种Callback

            onSuccess  onFailure  onUninitialized  onLoading  onLoaded  onInteractive  onComplete  onException

        Ajax和javascript的区别。

          javascript是一种在浏览器端执行的脚本语言,

          Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。

          Javascript是由网景公司开发的一种脚本语言,它和sun公司的java语言是没有任何关系的,它们相似的名称只是一种行销策略。

          在一般的web开发中,javascript是在浏览器端执行的,我们可以用javascript控制浏览器的行为和内容。

          在 Ajax应用中信息是如何在浏览器和服务器之间传递的,通过XML数据或者字符串

        XMLHttpRequest对象的常用方法和属性。
           open(“method”,”URL”) 建立对服务器的调用,

          第一个参数是HTTP请求    方式可以为GET,POST或任何服务器所支持的您想调用的方式。

            第二个参数是请求页面的URL。

              send()方法,发送具体请求  abort()方法,停止当前请求    

            readyState属性   请求的状态 有5个可取值0=未初始化 ,        

            1=正在加载   2=以加载,  3=交互中,  4=完成

              responseText 属性  服务器的响应,表示为一个串

              reponseXML 属性 服务器的响应,表示为XML

              status   服务器的HTTP状态码,200对应ok  400对应not found

      1,前台后台数据交互依赖的一项技术叫ajax;

        动态页面:跟后台发生数据交互的页面;

        js异步操作:ajax 定时器 回调 事件 

       2,ajax优点:可以局部更新网页的内容

        ajax本质:xtmlrequest对象

      3,第一步---创建xmlhttprequest对象

          var xmlhttp=new xmlhttprequest()

        第二步---向服务器发送请求

          xmlhttp.open("get" , "ajax.text" , "true" )

          method(请求类型get,post)  url(文件在服务器上的位置)  async(true异步,false同步)

        第三步---发送

          xmlhttp.send()

        第四步---服务器响应(靠状态来判断响应到哪一步了)

          xmlhttp.onreadystatechange = function(){

            if(xmlhttp.readystate = = 4 && xmlhttp.status = = 200){  //请求的五个阶段---返回请求的状态信息

                console.log(xmlhttp.responsetext)  //返回请求的文件内容

             }

          }

          readystate请求的五个阶段:

            0-请求为初始化  1-服务器连接已建立  2-请求已接收  3-请求处理中  4-请求已完成且响应已就绪

          status返回请求的状态信息:

            200-“ok”  404-未找到页面  3开头-代表禁用  5开头-服务器的问题

        4,ajax传参:

          客户端 服务器

          请求request  响应response

        5,ajax请求方式:

          GET---看的见,传送数据小,通过网络地址传;

          POST---看不见,传送数据大一些,通过http中的某个对象;

          JS提供了 $. ajax()

        6,跨域:

            不在同一个服务器下,就是协议,域名,端口,三者有一个不一样就是跨域;

          同源策略:

            请求的地址和浏览器的地址必须在同域下,协议,域名,端口都一样;

        7,http: 172.164.130.56 : 80

            http是协议  172是IP地址  80是端口

          互联网的协议是 http 和 https 两种;

        8,解决跨域:

           靠标签上的src属性,利用script标签上的属性去请求外部的数据,看网络地址,关键单词,cb 和 callback

           < script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=谭雅宁&json=1&p=3&sid=1440_25809_21101_18559_28607_28585_28557_28519_28625_28605&req=2&csor=1&cb=fn" >

        9,DOM形式创建:

           var  script = document . createElement (" script ")

           script . src = " url "

           document . body . appendchild (script)

           function fn (data){

              console . log (data)

             }

         10,iframe

            <iframe  src = " http:/www.run.com " > < / iframe >

         11,JQ中的ajax:

            load将服务器中的数据加载到指定的元素中;

            案例*  一个网站有许多页面,但是头部和尾部一样,使用load

            load传参  以 post 方式发送的

            php后台用 post 接收

               $(“ div ”).load(“ http://127.0.0.1:8088/3.11/load.php” , { txt : " xxx " })

            或 request 接收

               < ? php

                    echo  $_REQUEST [ " text " ]

               ? >

          12,JQ中的 get :

              $(function(){

                 $ . get ( " get . php " ,  { name : "zhang" } , function (data){

                    console.log (data)  

                 } )

              })

            JQ中的 post :

              $(function(){

                 $ . get ( " post . php " ,  { name : "zhang" } , function (data){

                    console.log (data)  

                 } )

              })

            JQ中的ajax:

              $ . ajax ({

                  type: “ post ” ,

                  url : “ post . php ” ,

                  async :  " true " ,

                     data : { name : " lisi " } ,

                        success : function (data){

                           console . log (data)

                        }

               })

                

  • 相关阅读:
    Matlab 图像处理中出现纯黑或纯白是怎么回事?
    网页中的公式在翻译时如何被保留下来?
    请勿 fAKe 评论
    C++ STL 使用注意事项整理
    APIO 2020 题解
    谈谈对题解本质的理解
    点双 & 边双连通图计数的细节比较
    联合省选 2021 A 卷 题解
    指数生成函数(EGF)计数小记
    UOJ-37 清华集训2014 主旋律
  • 原文地址:https://www.cnblogs.com/bokeyanghao/p/10527879.html
Copyright © 2011-2022 走看看