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 数据结构数据。 |
Ajax 学习笔记的更多相关文章
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- Ajax学习笔记demo
AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...
- 基于PHP的AJAX学习笔记(教程)
本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...
- ajax学习笔记1
ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据 ...
- AJAX学习笔记
AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...
- Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...
- Ajax学习笔记2之使用Ajax和XML
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...
- Ajax学习笔记1之第一个Ajax应用程序
代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...
- Ajax学习笔记(二)
二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...
- ajax学习笔记(原生js的ajax)
ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...
随机推荐
- JavaWeb 后端 <六> 之 EL & JSTL 学习笔记
一.EL表达式(特别重要)
- Mycat在MySQL主从模式(1主1从)下读写分离和及自动切换模式的验证
实验环境 两台Centos7 MySQL5.7.12 IP地址为:192.168.10.36 192.168.10.37 一台Centos7 Mycat IP地址为:192.168.10.31 一 ...
- Frameset框架集的应用
Frameset框架集常用于写网站后台页面,大多数"T字型"布局后台页面,就是应用Frameset框架集来做的.Franeset框架集的优点是,他可以在同浏览器窗口显示不同页面内容 ...
- oracle 小测
01)oracle10i,oracle11g,oracle12c,其它i,g,c什么意思? i(Internet)互联网 g(grid)网格 c(cloud) 云02)sqlplus是什么意思? 是o ...
- (转)Maven项目标准目录结构
场景:工作中的项目都是使用Maven的目录结构,虽然能够如期的完成开发工作,但是对于一个Maven工程的配置却并不熟悉,这里主要介绍下Maven工程的而目录结构. 1 标准目录结构 src -main ...
- JVM学习笔记三:垃圾收集器及内存管理策略
垃圾收集器 上文说到了垃圾收集算法,这次我们聊一下HotSpot的具体垃圾收集器的实现,以JDK1.7为例,其包含的可选垃圾收集器如下图: 不同收集器之间的连线,代表它们可以搭配使用,收集器所属的区域 ...
- Linux基本命令整理_sheng
Linux版本 Linux系统是一个多用户.多任务的分时操作系统. Linux版本分为内核版本和发行版本. 常见的Linux发行版有: RedHat(分为用于企业的Red Hat Enterprise ...
- 原生JS元素怎么取消事件
关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...
- Classy(排序)
Description In his memoir So, Anyway. . ., comedian John Cleese writes of the class di erence betwee ...
- VPS安装中文语言
在CentOS VPS下修改语言编码: localedef -c -f UTF-8 -i zh_CN zh_CN.utf8 export LC_ALL=zh_CN.utf8 上面第一步是用来产生编码文 ...