ajax初步搭建及示例代码
AJAX(Asynchronous JavaScript and XML):基于XML的异步JavaScript,简称AJAX,是多种技术的综合.
一种客户端技术 ,为互联网用户提供更加友善的交互界面,更加流畅的用户体验.也就是所谓的胖客户端,使网页的效果能够像安装在计算机上的应用软件或系统一样友好华丽.
它由如下四种技术组成:CSS + DOM + XMLHttpRequest+ JavaScript .
各部分功能如下:
CSS : 控制页面的显示 。
DOM : 控制文档结构 。
XMLHttpRequest: 负责与服务器进行异步通信 。
JAVAScript : 调用,控制其他三个组成部分。
如果去掉XMLHttpRequest则为DHTML技术.
==========================================================
基本流程如下:
1) 事件触发通信过程
2)
2.1 创建XMLHttpRequest对象 createXHR()
2.2 准备要发送到服务器的参数 .
2.3 指定用于处理应答的函数 . xhr.onreadystatechange = fn [ 回调函数 ] ;
2.4 open() , send() ;
3) 编写回调函数 .
3.1
通信过程结束 : xhr.readyState == 4
服务器执行 : xhr.status == 200
3.2 对服务器的应答结果进行处理 :
复杂的用xhr.responseXML (DOM方式)
简单的用xhr.responseText(返回的字符串)
==========================================================
XMLHttpRequest与服务器之间数据交换的方式有get和post两种.
使用POST方式提交:
url = "/ajax/test.jsp" ;
XMLHttpRequest.open( "POST" , url );
 
相关文档:
这里我们再理解了AJAX后,开始来用实例感受AJAX的力量。
今天我最后要实现的效果,当鼠标放到图片上时会根据,会把数据库库里的数据读出,通过显示框显示出来。这个在很多网上商店都有用到这里效果,我们这里用AJAX来实现这个效果。这个实例里结合了MySql、Servlet还有Js,理论性很少,但通过实践来感受理论知识。
......
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LeftMenu.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xht ......
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript&quo ......
为了让各为能够了解什么是AJAX,以下是一个AJAX的手工范例(即不引用任何的Library或AJAX
framework),此范例颇为精要易懂,其作用主要是透过Client 端的Browser来即时监控Web 服务器资源或效能变化,各位只要做过
一遍范例就能够了解AJAX在网页开发上是多么具有威力了。
先来看看效果图:
本范例是一个简单的A ......
php代码:
<?php
$arr = array(1, '刘天才', 22);\
echo json_encode($arr);die();
?>
js:
<script type="text/javascript">
function returnObj( info )
{
var string = info.responseText;
var array = eval( ......