Ajax 学习笔记

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

ajax代码讲解(html页面文件):

<!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>
    <title>lkyAjax</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#tj").click(function () {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();   //创建XMLHttpRequest对象;
                }
                else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {  //onreadystatechage函数,每当readyState属性改变时改变时就会调用该函数。
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readyState=0时:请求未初始化;=1时:服务器连接已建立;
                                                                        //=2时:请求已接受;=3时:请求处理中;=4时:请求已完成,且响应已就绪;
                                                                        //status=400时ok;=404时未找到页面;
                        $("#showName").val(xmlhttp.responseText);  //responseText获得字符串形式的响应数据。。还有一种响应形式responseXML返回的是xml 
                    }
                }
                xmlhttp.open("GET", "0000.ashx?actionS=Ajax", false);   //如果传入参数为中文必须使用encodeURI(“中国”)不然会出现乱码。。
                //opwn(method,url,async);method为:get或post;url为处理页面的url;async为true或false:true代表异步执行;false代表同步执行;
                xmlhttp.send(); //send(string)将请求发向服务器、、string仅限于post请求;
            });
        });

//Jqurey简化后

$(function () {
            $("#JAtj").click(function () {
                htmlvar = $.ajax({ url: "0000.ashx?actionS=Jquery", async: true });
                //                $("#Text1").val(htmlvar.responseText);
                $("#myDiv").load("0000.ashx?actionS=Jqueryd&&d=" + Math.random());
            });
        });
    </script>
</head>
<body>
<div id="myDiv"></div>
<input type="text" id="showName"/>
<input type="text" id="Text1"/>
<input type="submit" value=" 点我下 " id="tj"/>
<input type="submit" value=" JqueryAjax尽情点吧 " id="JAtj"/>
</body>
</html>

note:

1.与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

2.不推荐使用 async=false,但是对于一些小型的请求,也是可以的。

请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

一般处理程序页面文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Ajax大练兵
{
    /// <summary>
    /// _0000 的摘要说明
    /// </summary>
    public class _0000 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
                string name = context.Request["actionS"];  //获取参数值
                context.Response.Write("我叫:" + name);   //处理后写入页面
                context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数 描述
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
.load() 从服务器加载数据,然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素,返回 JSON 数据结构数据。
时间: 2024-12-13 01:13:02

Ajax 学习笔记的相关文章

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

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

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

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

ajax学习笔记1

ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据和内容,实现局部刷新让用户能够更好的浏览网站.在没有ajax的时候,网页提交表单必须进行等待和刷新,这时用户必须等待服务器的响应,用户在当前页面不能做其他事情.自从有了ajax,用户在提交表单的时候不需要等待,可以浏览该页的其它东西,表单提交之后服务器能很快的返回所需的数据和网页,网页无需刷新. a

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTod

Ajax学习笔记(一)

XMLHttpRequest对象详解 1.Ajax应用中我们使用XMLHttpRequest对象异步发送请求,这种请求既可以是GET,也可以是POST,都可以带请求参数. 请求发送出去之后,服务器响应会在合适的时候返回,但是客户端不会自动加载这种异步响应,程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取    服务器响应,再通过DOM操作将服务器响应动态加载到当前页面中. XMLHttpRequest的用处是:提供与服务器异步通信的能力 2.

jQuery中的Ajax学习笔记

前段时间学习了<锋利的jQuery第六章>jQuery与Ajax应用,现做如下笔记: 我们先来了解一下,什么是Ajax呢?Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体.简短地说,在不重载整个页面的情况下,Ajax通过后台加载数据,并在网页上进行显示. 我们来简要回顾一下Ajax.早在1998年,微软就引入了一个ActiveX控件,从而能

Ajax学习笔记

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完

Javascript,jQuery,ajax学习笔记。持续更新中。[荐]

欢迎大家关注我的博客,我的博客是在平常学习看书中和总结而撰写的,欢迎大家和我交流,不足之处还很多,希望大家和我交流. 一:javascript基础系列(已完结) 二:javascript基础系列之DOM(已完结) 三:jQuery系列文章(未完结) 四:AJAX(未完结) 五:JavaScript权威指南第6版中文版   一:javascript基础系列: Javascript基础系列之(一)JavaScript语法 Javascript基础系列之(二)变量 Javascript基础系列之(三)