zoukankan      html  css  js  c++  java
  • AJAX -------------- 如何使用ajax

    AJAX  即“Asynchronous JavaScript and XML”(异步的JavaScript 与 XML技术 ),指的是一套综合了多项技术的浏览器端网页开发技术。

    所谓为的异步交互:指的就是就是能在不更新整个页面的前提下维护数据

    提       出:杰西·詹姆士·贾瑞特

    发行时间 :2005年2月18日

    程序案例:新浪微博、Google 地图、开心网等等

    与传统相比有什么优点:

      传统的web,B/S ,架构,用户提交表单,就像网页服务器发送一个请求。服务器接收并处理传来的表单,送回一个新的网页。

                  缺点:浪费宽带(前后两个页面的HTML代码大部分都是相同的),速度慢(数据传递到用户界面靠的是服务器的回应时间)

      AJAX 可以仅向服务器发送并取回必须的数据,并在客户端采用js 处理来自服务器的回应。

                        优点:服务器回应速度增快(处理的数据量大大减少),服务器负荷减少(很多的处理工作早客户端的机器上完成)

           缺点:可能破坏浏览器的后退与加入收藏书签功能,浏览器的兼容性问题

    注意:

      AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术
      虽然其名称包含XML,但实际上数据格式可以由JSON代替,进一步减少数据量,形成所谓的AJAJ。
      一些基于AJAX的“派生/合成”式(derivative/composite)的技术也正在出现,如AFLAX

    方式:

    实现步奏: 

      1、创建XMLHttpRequest  对象

      2、设置响应函数

      3、设置访问接缪按

      4、发送请求

      5、当服务端的响应返回,响应函数被调用

      6、在响应函数中,判断响应是否成功,如果成功获取服务端返回文本,并显示

    XMlHttpRequest

    用在后台与服务器交换数据。意为着可以在不重新加载整个网页的情况下,对网页的某部分进行刷新

    创建XHR对象 语法:

    variable= new XMLHttpRequest();

    XMLHttpRequest 对象有三个重要的属性:

    设置响应函数

    XMLHttpRequest 作用是和服务器进行交互,所以既会发消息给服务器,也能接收服务器的响应

    当服务器做出响应的时候,通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

    发出请求

    通过open函数设置背后的这个小线程,将要访问的页面url 

    xmlhttp.open("GET",url,true);

    通过send函数进行实际的访问

    xmlhttp.send(null);

    null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。
    只有在用"POST",并且需要发送参数的时候,才会使用到send。
    类似这样:
    xmlhttp.send("user="+username+"&password="+password)

    处理回应的信息

    在checkResult 函数中处理响应

    function checkResult(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200)  
         document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
    }


    xmlhttp.readyState 4 表示请求已完成
    xmlhttp.status 200 表示响应成功
    xmlhttp.responseText; 用于获取服务端传回来的文本
    document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

    代码:

  • 相关阅读:
    最大子数组求和并进行条件组合覆盖测试
    Ubuntu 16.04 c++ Google框架单元测试
    The directory '/home/stone/.cache/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If execu
    Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/cache/app-info -a -e /usr/bin/appstreamcli; then appstreamcli refresh > /dev/null; fi'
    个人博客作业三:微软小娜APP的案例分析
    补交 作业一
    补交 作业二:个人博客作业内容:需求分析
    嵌入式软件设计第12次实验报告
    嵌入式软件设计第11次实验报告
    嵌入式软件设计第10次实验报告
  • 原文地址:https://www.cnblogs.com/obge/p/11573836.html
Copyright © 2011-2022 走看看