zoukankan      html  css  js  c++  java
  • ajax入门级

    AJAX

    AJAX:即异步的JavaScript 和 XML,是一种用于创建快速动态网页的技术;

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

        使用AJAX则不与要加载更新整个网页,实现部分内容更新;

     

    AJAX = Asynchronous JavaScript and XML (异步的JavaScript 和 XML)

    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

    为什么要使用AJAX:

        AJAX主要是实现页面和web服务器之间数据的异步传输;

        简单来说,不采用ajax的页面,当用户在页面发送请求是,就要进行整个页面的刷新,刷新块面取决于服务器的处理快慢。在这个过程中用户必须得等待,不能济宁其他操作,也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低,用户体验差。

     

        采用ajax的页面,可以实现页面的局部更新,而不是整个页面的更新;并且发送请求后,用户还可以惊醒页面上的其他操作,这就是异步的方式;客户端和服务端间值传递需要的数据,效率高,用户体验性好;并且AJAX引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大量用户下的服务器负载;

     

    AJAX的工作原理:

        XHR(浏览器内置对象:XMLHttpRequest)也就是AJAX功能实现所依赖的对象,AJAX就是通过浏览器的内置对象XMLHttpRequset来发送异步请求的,异步请求不会妨碍客户端的任何操作;

     

    这里简单说下什么是异步:

        XHR就相当于一个通信兵,来负责客户端与服务器之间的通信传输;

    要打仗了,前方阵地(客服端)不可能只等着通信兵(XHR)传递消息其他什么也不干吧,所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部(服务器)的命令,指挥部下达命令指挥,通信兵再把命令传到前方阵地,然后前方阵地再执行命令相关的操作(客户端把数据渲染到页面),这也就是Ajax的异步原理。

     

    同步:所谓的同步就是前方阵地和通信兵一起去向服务器请求数据,直到通信兵请求到数据,我才开始渲染页面,在请求的过程中页面一直是白屏等待的。

     

    var xml = new XMLHttpRequest()         // 这是生成一个ajax对象

     

    xml.open(method,url,boolean)

    //  open(): XMLHtttpRequset.open()方法用于指定HTTP请求的参数,或者说初始化XMLHttpRequest实例对象,

    参数1:有get和post两个取值

    参数2:是你获取的路径

    参数3:当是“true”的时候,服务器的请求是异步进行的,也就是脚本执行send()方法后不等待,服务器的执行结果,而是继续执行脚本代码;

        当时false是,服务器请示是同步及逆行的,也就是脚本执行send()方法后等待服务器的执行截锅的返回,若在过程中超时,则不再等待,继续执行后面的脚本代码;

     

    xml.send()

        **这里我不是太清楚***   当open中使用GET方法提交这里的send()参数使用null;

          也可以使用send()方法传递参数,shyongsend方法传递参数使用的是POST方法,需要谁的那个Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容;参数的提交格式和GET方法中url的写法一样。设置头信息前必须调用open方法;xmlHttpRequest.open("POST","login.jsp",true); xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); 

        需要主要的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost()方法

     

    xmlHttpRequest常用属性

        redayState: 返回的是一个整数,表示实例对象的当前状态,该属性为只读。它返回以下值;

    0,表示 XMLHttpRequest 实例已经生成,但是实例的open()方法还没有被调用。

    1,表示open()方法已经调用,但是实例的send()方法还没有调用,仍然可以使用实例的setRequestHeader()方法,设定 HTTP 请求的头信息。

    2,表示实例的send()方法已经调用,并且服务器返回的头信息和状态码已经收到。

    3,表示正在接收服务器传来的数据体(body 部分)。

    4,表示服务器返回的数据已经完全接收,或者本次接收已经失败。

        onredaystatachange 这个属性属于一个监听函数:通信过程中,每当实例对象发生状态变化,它的readyState属性的值就会改变。这个值每一次变化,都会触发readyStateChange事件。

    这里写一个简单的写法:

    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          fn(xmlhttp.responseText)
        }
      }
    }
     
         responseText属性属性返回从服务器接受到的字符串,该属性为只读;只有HTTP请求完成后接受以后,该属性才会包含完整的数据;
     
         status属性:

    XMLHttpRequest.status属性返回一个整数,表示服务器回应的 HTTP

    状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为0。该属性只读。

    200, OK,访问正常

    404, Not Found,未发现指定网址

    500, Internal Server Error,服务器发生错误

     

     

        jQuery中的AJAX;

      $.ajax({

          type:"post",

          url:"",

          async:true,

          data:{},

          success:function(data){

            console.log(data)

        }

      })

       这是jQuery中提供的ajax方法

        

     
     
     
     
     
     
  • 相关阅读:
    常用类练习题(用字符串常用类判断输入的一段话是否为回文)
    面向对象综合练习题(动物乐园)
    多态练习题(通过UML建模语言来实现饲养员喂养动物)
    UML建模语言使用的概述
    多态练习题(员工使用不同的交通工具回家)
    多态练习题(宠物医院治疗小动物的问题 ,多态的应用:向上类型传递)
    接口练习题(书信接口)
    接口练习题(实现接口功能拓展的两种方法)
    Oracle rman 各种恢复
    Oracle rman 全备份的一个小例子
  • 原文地址:https://www.cnblogs.com/blankOne/p/10521829.html
Copyright © 2011-2022 走看看