【AJAX】AJAX入门基础

一、AJAX简介:

AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)。AJAX不是新的编程语言,而是一种使用现有标准的新方法,AJAX通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用AJAX)如果需要更新内容,必须重新加载整个网页面。

        AJAX的一个经典应用就是Google Sugget:Google Sugget使用AJAX创造出动态性极强的web界面,当您在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

二、AJAX工作原理:

                                                          


三、XMLHttpRequest:

       XMLHttpRequest是AJAX的基础。所有现代浏览器均支持XMLHttpRequest对象。(IE5和IE6.0使ActiveObject),XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

1、创建XMLHttpReuest语法:    
   variable=new XMLHttpRequest();

老版本的IE(IE5和IE6)使用ActiveX对象,语法:   

    variable=new ActiveObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,需要先检查浏览器是否支持XMLHttpRequest对象。
    var xmlhttp;
    if(window.XMLHttpRequest)
      {
       xmlhttp=new XMLHttpRequest();
      }
    else
      {
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }


2、与服务器交换数据:

      如果需要将请求发送到服务器,我们使用open()和send()方法。

      方法:open(method,url,async)    描述:规定请求的类型、URL以及是否异步处理请求。
                                                                 .method:请求的类型:GET或POST
                                                                 .url:文件在服务器上的位置
                                                                 .async:true(异步)或false(同步)


      方法:send(string)                            描述:将请求发送到服务器
                                                                         .string:仅用于POST请求


3、GET或POST
      与POST相比,GET更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用POST请求:
      ①无法使用缓存文件(更新服务器上的文件或数据库)
      ②向服务器发送大量数据(POST没有数据量限制)
      ③发送包含未知字符的用户输入时,POST比GET更稳定也更可靠。
4、异步--True或False?
       XMLHttpRequest对象如果要用于AJAX的话,其open方法的async参数必须设置为true:        
    xmlhttp.open("GET","ajax_test.asp",true);
       对于web开发人员而言,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费事。AJAX出现之前,这


可能会引起应用程序挂起或停止。
       通过AJAX,JavaScript无需等待服务器的相应,而是:
      .在等待服务器响应时执行其他脚本。
      .当相应就绪后对相应进行处理。
需要注意的是,当使用async=true时,需要规定相应处理onreadystatechange事件中的就绪状态时执行的函数。


四、onreadystatechange事件:
       首先我们先介绍一下XMLHttpRequest对象的三个重要的属性:

             

        当请求被发送到服务器时,我们需要执行一些基于响应的任务。在onreadystatechange事件中,我们规定当服务器已做好被处理的准备是执行的任务。当readyState = 4且status = 200时,表示相应已就绪。

五、总结:

        AJAX前景非常乐观,可以提高系统性能,优化用户界面等。




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值