AjAX学习总结

[1] AJAX简介
    > 全称: Asynchronous JavaScript And XML
    > 异步的JavaScript和XML

> AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。
    > XML指的是服务器响应的数据的格式。
    > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。

[2] 同步和异步
    > 同步:
        当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
    > 异步:
        当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。

[3] XMLHttpRequest对象
    > 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
    > 在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
    > 如何获取XMLHttpRequest对象
    - var xhr = new XMLHttpRequest();

[4] 使用步骤
    1.创建XMLHttpRequest对象
    大部分比较新的浏览器都支持的方式(IE7以上)
    var xhr = new XMLHttpRequest();
    IE6以下的
    var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    IE5.5以下的
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

通用的获取XMLHttpRequest对象的方法:

//写一个获取XHR的方法
    function getXMLHttpRequest(){
    try{
    //大部分浏览器都支持的方式
    return new XMLHttpRequest();
    }catch(e){
    try{
    //IE6以下浏览器支持的方式
    return new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    //IE5以下的浏览器
    return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    alert("你是火星来的吧!你的浏览器不支持AJAX!");
        }

}

}
    }

[5].设置请求信息(请求地址,请求方式,请求参数)
    xhr.open(请求方式,请求地址);
    在发送post请求时,还需要设置一个请求头,如下:
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

[6]发送请求
xhr.send(请求体);
get请求没有请求体,所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。

[7].接收响应信息
    //xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
    xhr.onreadystatechange = function(){
    //判断当前readyState是否为4 , 且响应状态码为200
    if(xhr.readyState==4 && xhr.status==200){
    //读取响应信息,做相关操作。

//如果信息为纯文本
    xhr.responseText

//如果信息为XML
    xhr.responseXML
     }
    };

[8] 响应数据的格式
    - 响应一个XML
    - 当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
    - 返回 User :username:sunwukong age:18 gender:男
    username:sunwukgon,age:18,gender:男
    - 我们可以通过一个XML格式来返回一个大量的信息
    <user>
    <name></name>
    <age></age>
    <gender></gender>
    </user>

- 响应一个JSON对象

时间: 2024-12-30 00:04:46

AjAX学习总结的相关文章

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

Ajax学习教程在线阅读

  1.什么是AJAX ?(1) 2.什么是AJAX ?(2) 3.什么是AJAX ?(3) 4.什么是AJAX ?(4) 5.Ajax基础教程(1)-Ajax简介 1.1 Web应用简史 6.Ajax基础教程(1)-Ajax简介 1.2 浏览器历史 7.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程 8.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程(2) 9.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程(3) 10.Ajax基础教

Ajax 学习初步

Ajax学习 第一步.创建 XMLHTTPRequest 对象 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject : var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera,Safari xmlhttp=new XMLHttpRe

dwr实现ajax学习

前一段时间看了一点dwr实现ajax的介绍信息,一直想找个机会看看到底怎么用.今天起了个早,试了一下感觉还挺好用的. 下面是我的一点学习总结: 一.配置DWR(http://getahead.org/dwr/getstarted)1.将dwr.jar包放在web-info/lib目录下2.编辑web.xml文件,添加servlet <servlet>  <servlet-name>dwr-invoker</servlet-name>  <display-name&

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

Ajax学习心得

Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网页没有使用Ajax技术,当更新网页内容时要重新加载页面来重写页面,如果是整个网站,这工作量无疑是巨大的,但有了Ajax技术,我们在后台进行表单设计时,加入相关代码,实现异步输入输出,局部更新,这就使工作变得轻便.例如,现在很多的知名网站,像腾讯,新浪,谷歌,百度地图等等,都使用了这种技术. 而要学习

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

ASP.net中的AJAX学习记录六 无刷新的数据编辑(GridView和DetailsView结合实例)(转)

本篇博客是仿照书中实例,实现GridView和DetailsView结合无刷新的数据编辑效果,页面效果:当点击GridView1的行或换页时,都会引发DetailsView1的数据绑定显示至页面,同时当使用DetailsView1编辑.删除.添加时,也会引起GridView1的重新绑定,整体页面实现无刷新. 页面布局: 1.新建AJAX窗口,命名为:"NoRefreshEdit.aspx".要想实现页面无刷新编辑,就必须使用两个Updatepanel. 2.在NoRefreshEdit

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM