初学AJAX

最新推荐文章于 2024-10-02 05:39:15 发布

wuai22

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量407

点赞数

文章标签： xmlhttprequest javascript servlet ajax 服务器 html

本文链接：https://blog.csdn.net/wuai22/article/details/5778929

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Ajax.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <mce:script type="text/javascript" language = "javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div id = "result"> </div> </form> </body> </html>

第一次敲关于AJAX的代码,每个单词都是那样生疏,虽然这只是一段短短的代码,却耗费了我三个小时的时间,边看书,边敲打,边理解,边写注释,好累好累,不过这样一来,对于AJAX中经常使用的单词也知道了不少,记忆加深了,最基本的步骤理解的差不多不了,现送上我的第一篇关于AJAX的笔记,虽然是看着课本做的笔记，条理性仍不是很明朗，只是本人自认为重要或易懂的知识条框等记录下来，若是像我这样的刚刚开始接触AJAX的童鞋们，可以参考下帮助入门，若是想要提高，可以参考我列举的参考书籍。

【0】参考书籍
JavaScript权威指南
JavaScript Professional Projects
DHTML 手册.chm
HTML与XHTML权威指南
DOM文档对象中文手册.chm
CSS权威指南
CSS中文手册.chm
Professional Ajax(AJAX高级程序设计)
Foundations Of AJAX(AJAX基础教程)
Progmatic AJAX(AJAX修炼之道-web2.0入门)
AJAX For DOMMIES(AJAX傻瓜教程)
AJAX In Action(AJAX实战)
AJAX Hacks
《AJAX开发简略》
《AJAX--新手快车道》
《AJAX开发精要=概念、案例与框架》
《AJAX Design Patterns》
《Head Rush AJAX》

【1】走进AJAX
Asynchonous JavaScript And XML
老技术新思想
改善表单验证方式
不许刷新就可以改变页面内容
按需获取数据
读取外部数据进行数据处理整合
异步与服务器进行交互在交互过程中用户无需等待仍可继续操作

【2】AJAX的思维方式
举例：通过用户名校验查看Web与AJAX应用开发思维的不同之处
需求：用户在页面的文本框输入想注册的用户名‘abc’ 然后点击校验按钮点击校验存在请重新输入否则提示可以继续注册
分析：1）校验用户名需要html页面和servlet程序位于一个form表单中，这个表单将请求提交给servlet程序，servlet程序判断当前的用户名是否是abc 并给吃相应的提示，同时servlet中还生成一个连接，用于返回html页面。
从上述例子可以得到，传统web开发思维模式的一个特点死通过form表单提交请求信息，然后转向一个新的页面处理信息，并显示服务器端返回的信息。尝试运行，
经历：在浏览器中输入用户名，点击按钮用户名给Servlet 浏览器转向Servlet页面，等待Servlet处理,servlet返回相应信息，在浏览器中看到ervlet页面的响应信息。
2）需要html页面和一个Servlet程序，html页面包含文本框和校验按钮，点击提交按钮以后，需要通过Javascript获取文本框中的数据，然后通过XMLHttprequest发送数据给sevlet,此外还需要准备用于接收响应的Javascript函数，接收到servlet的提示信息后，将这些信息动态写在页面上，servlet程序判断当前用户名是否是abc，并给出相应的提示。
AJAX模式下问题分析的变化，servlet无需返回html页面的链接，因为不需跳转到servlet表示的页面中，止血获得servlet页面产生的结果。HTML页面不用表单提交数据，数据通过Javascript来获取，然户通过XMLHttprequest的对象发送个servlet 且没有做页面跳转。需要一个servelt相应信息的Javascript函数，没有进入servlet代表的页面查看相应信息，而是把servlet的相因信心接受回来，显示在当前页面。
AJAX的应用流程，在浏览器输入数据，点击按钮提交请求，用户可以继续做其他事情；servlet在处理数据，并发挥数据，浏览器收到响应，浏览器的当前页面显示响应结果。。
流程的对比：AJAX应用中没有线新页面跳转，用户不需要处于无事可做的等待中。
流程图：
AJAX
XMLHttprequest {Javascript代码发出请求}服务器处理{Javascript代码发出请求}{Javascript接收响应} 服务器处理{Javascript接收响应} {Javascript代码发出请求} 服务器处理{Javascript接收响应}

【3】AJAX的技术核心

XMLHttprequest对象
DOM与HTML
DOM与XML
面向对象的Javascript
短代码：
<input type="button" id = "btn1" value = "校验" onclick = "submit()"/>
与传统的web开发模式不同，页面中没有form,submit换成了一个button,在button中使用了一个onclick属性，作用是，点击按钮时，调用该属性所指向的Javascript函数，在Javascript函数中使用XMLHttprequest对象来与服务器程序（例如servlet）进行数据传输。在AJAX模式中，通常在Javascript代码中通过DOMain获得html页面中某个节点的值，一般都定义id属性。

建立div标签，div应该说是AJAX模式下一个很重要的html标签。比较常用的就是用div+css替代table的方式来划分网页结构，div中放内容，css控制这些内容的展现形式。
div标签的常用之处就是用于放置动态加入网页中的内容，先建立一个美誉内容的那个div,在在Javascript代码中通过DOMain动态的向其中添加内容，以保证页面不刷新的情况下店铺内国泰修改页面内容。
doucument.getElementById("btn1");document.getElementById("name").value;
根据id获得对应的节点（某个HTML标签的内容）分别用这个语句获得div和文本框的节点。.value是活的文本框的Value属性值，也就是内容。

resultNode.innerHTML = "不能建立XMLHttoRequest对象";这样做的用法是为了设置某一个节点中的html的内容，resultNode代表的是div那个节点，这句话的效果是使div的内容变成了
<div id = "result">不能建立XMLHttpRequest对象</div>这样就会在页面中看到这行提示信息。
方法描述
abort() 停止当前请求
getAllResponseHeaders() 返回包含HTTP请求的所有响应头信息，其中响应头是Content-Length,Data,URI等内容
，返回值是一个字符串，包含头信息，其中每一个键名和键值用冒号分开，每一组之间用CR和LF(回车家换行)分割

总结--AJAX应用的五个步骤：
1.建立XMLHttpRequest对象
2.设置回调函数
3.使用open方法与服务器建立连接、
4.向服务器端发送数据
5.在回调函数针对不同响应状态进行处理

注意：
不同浏览器下，XMLHttpRequest对象的建立方式不同、
设置回调函数时不要加括号

open方法的三个参数含义，GET和POST方式服务器端地址的不同写法
GET和POST方式send的参数的不同之处，以及POST方式下send之前需要设置请求头信息的工作
如何判断正确的响应数据已经返回，此外还要注意如何获取响应数据内容

XMLHttpRequest的一个特殊安全问题：
IE：访问跨域页面时，会给出提示，用户确认后会访问
Mozilla fireFox及其他：不允许访问跨域页面

HTML的DOM和XML的DOMain在API接口上基本一致，使用差别不大，本质上有区别
HTMl的DOM是一个内存对象树，在浏览器中只保存一份，HTML的DOM修改HTML的内容会直接反应发哦浏览器中；而XML的DOMain则可以创建多个，每个可以对应一个XML文本。

根节点，表示HTML的根，在Javascript中有一个特殊的对象document，它可以表示HTML的根节点，其在AJAX中非常常用的方法
createAtrribute() 用指定名字创建新的Attractions节点对象。方法参数为属性的名字。
createComment() 用指定的字符串创建新的Comments节点对象。方法参数为主食信息
createElement() 用指定的标记名创建新的Element节点对象。方法参数为节点标签的名字。
createTextNode() 用指定的文本创建新的文本节点对象。方法参数为文本信息。
getElementById() 返回文档中具有指定id属性的Element节点。方法参数为节点的id属性值。
getElementsByTagName() 以数组方式返回文档中具有指定标记名的所有Element节点，其顺序为在文档中出现的顺序。
标记名指的是像body,table 这样的HTMl标记名称。方法参数为标记名称。