首页 > 代码库 > Ajax 学习笔记

Ajax 学习笔记

2024-09-16 04:20:11   233人阅读

什么是 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="http://www.mamicode.com/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="http://www.mamicode.com/点我下" id="tj"/>
<input type="submit" value="http://www.mamicode.com/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 数据结构数据。

Ajax 学习笔记


联系
我们