ajax实例,ajax示例
jQuery中ajax - get() 方法实例详解
在jquery中使用get，post和ajax方法给服务器端传递数据，在上篇文章给大家分享了jquery中ajax-post()方法实例，下面通过本文继续学习jQuery中ajax
-
get()
方法，具体介绍请看下文。
jQuery
Ajax
参考手册
实例
使用
AJAX
的
GET
请求来改变
div
元素的文本：
$("button").click(function(){
$.get("demo_ajax_load.txt",
function(result){
$("div").html(result);
});
});
亲自试一试
定义和用法
get()
方法通过远程
HTTP
GET
请求载入信息。
这是一个简单的
GET
请求功能以取代复杂
$.ajax
。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用
$.ajax。
语法
$(selector).get(url,data,success(response,status,xhr),dataType)
详细说明
该函数是简写的
Ajax
函数，等价于：
$.ajax({
url:
url,
data:
data,
success:
success,
dataType:
dataType
});
根据响应的不同的
MIME
类型，传递给
success
回调函数的返回数据也有所不同，这些数据可以是
XML
root
元素、文本字符串、JavaScript
文件或者
JSON
对象。也可向
success
回调函数传递响应的文本状态。
对于
jQuery
1.4，也可以向
success
回调函数传递
XMLHttpRequest
对象。
示例
请求
test.php
网页，忽略返回值：
$.get("test.php");
更多示例
例子
1
请求
test.php
网页，传送2个参数，忽略返回值：
$.get("test.php",
{
name:
"John",
time:
"2pm"
}
);
例子
2
显示
test.php
返回值(HTML
或
XML，取决于返回值)：
$.get("test.php",
function(data){
alert("Data
Loaded:
"
+
data);
});
例子
3
显示
test.cgi
返回值(HTML
或
XML，取决于返回值)，添加一组请求参数：
$.get("test.cgi",
{
name:
"John",
time:
"2pm"
},
function(data){
alert("Data
Loaded:
"
+
data);
});
jquery
ajax
的
$.get（）用法详解
js文件
$(document).ready(function(){
$("form").submit(function(event)
{event.preventDefault()})//取消submit的默认行为
$("form
input[type='submit']").click(function(){
var
url
=
$('form').attr('action');
//
取Form中要提交的链接
var
param
=
{};
//
组装发送参数
param['name']
=
$('form
input[name=name]').val();
param['age']
=
$('form
input[name=age]').val();
$.get(url,
param,
function(dom)
{
$('div.get').append(dom)
})
;
//
发送并显示返回内容
});
})
html文件
form
action="ajax.php"
method="get"
Name:
input
type="text"
name="name"
/
Age:
input
type="text"
name="age"
/
input
type="submit"
/
/form
div
class="get"这是ajax的get方法/div
php文件
error_reporting(0);
if($_GET["name"]=="kitty")
{
$name=
"you
are
the
lucky";
}
else
$name=$_GET["name"];
$age=$_GET["age"];
echo
"div
".$name."
".$age."/div";
以上介绍就是本文给大家分享的jQuery中ajax
-
get()
方法实例详解，希望大家喜欢。
一分钟学会什么是Ajax及Ajax请求的五个步骤
AJAX的意思就是异步的JavaScript和XML。简而言之，它是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息，包括JSON、XML、HTML和文本文件。AJAX最为吸引人的就是它的“异步”特性，AJAX可以无需刷新页面而与服务器端进行通信。
Ajax请求的五个步骤：
1、建立xmlHttpRequest对象
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
} else if(window.ActiveXobject) {
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for(var i = 0; i activeName.length; i++) {
try {
xmlHttp = new ActiveXobject(activeName[i]);
break;
} catch(e) {}
}
}
if(!xmlHttp) {
alert("创建xmlhttprequest对象失败");
} else {}
2、设置回调函数
xmlHttp.onreadystatechange= callback;
function callback(){}
3、使用OPEN方法与服务器建立连接??xmlHttp.open("get","ajax?name="+ name,true)
此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
4、向服务器端发送数据
xmlHttp.send(null)；如果是POST方式就不为空
5、在回调函数中针对不同的响应状态进行处理
if(xmlHttp.readyState == 4){ ????? //判断交互是否成功
if(xmlHttp.status == 200){ ??????? //获取服务器返回的数据 ??????? //获取纯文本数据
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
扩展资料：
Ajax优缺点
优点：
1、异步请求，不妨碍用户浏览页面或者其他操作。
2、局部刷新，无需重新刷新页面。
3、界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
4、基于标准被广泛支持。
5、前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
缺点：
1、back和History,对浏览器机制的破坏。
2、安全问题。易受到黑客攻击。
3、对搜索引擎支持较弱。
4、不能很好支持移动设备。
5、违背URL和资源定位的初衷。
AJAX请求类实例代码
AJAX请求类实例代码
代码如下:
// AJAX类
function AJAXRequest() {
var xmlObj = false;
var CBfunc,ObjSelf;
ObjSelf=this;
try { xmlObj=new XMLHttpRequest; }
catch(e) {
try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); }
catch(e2) {
try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e3) { xmlObj=false; }
}
}
if (!xmlObj) return false;
this.method="POST";
this.url;
this.async=true;
this.content="";
this.callback=function(cbobj) {return;}
this.send=function() {
if(!this.method||!this.url||!this.async) return false;
xmlObj.open (this.method, this.url, this.async);
if(this.method=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlObj.onreadystatechange=function() {
if(xmlObj.readyState==4) {
if(xmlObj.status==200) {
ObjSelf.callback(xmlObj);
}
}
}
if(this.method=="POST") xmlObj.send(this.content);
else xmlObj.send(null);
}
}
AJAX请求类
by HotHeart(热血心肠)
Site:
Blog:
类名：AJAX
创建方法：var ajaxobj=new AJAX;，如果创建失败则返回false
属性：method - 请求方法，字符串，POST或者GET，默认为POST
url - 请求URL，字符串，默认为空
async - 是否异步，true为异步，false为同步，默认为true
content - 请求的内容，如果请求方法为POST需要设定此属性，默认为空
callback - 回调函数，即返回响应内容时调用的函数，默认为直接返回，回调函数有一个参数为XMLHttpRequest对象，即定义回调函数时要这样：function mycallback(xmlobj)
方法：send() - 发送请求，无参数
一个例子：
var ajaxobj=new AJAXRequest; // 创建AJAX对象
ajaxobj.method="GET"; // 设置请求方式为GET
ajaxobj.url="default.asp" // URL为default.asp
// 设置回调函数，输出响应内容
ajaxobj.callback=function(xmlobj) {
document.write(xmlobj.responseText);
}
ajaxobj.send(); // 发送请求 ;
ajax用在哪些地方（求列举点实际应用的例子..）
AJAX可以用在任何你要进行数据库交互的地方.但是,虽然这么说,也不能全部都用AJAX写程序.如果客户端不支持JS或者出了什么问题你这个程序就完啦...
呵呵..在某些不刷新而要与数据库交互的地方可以用上这个.
我们做网站就要有良好的用户体验.
在某些要登录才能发贴的地方可以用上.比如说,用户写了好长一篇文章.提交后才发现,session过期.而导致跳转到登录页了,他写的东西那就全没了.这样对用户来说,就不太友好了.所以我们可以AJAX判断一下是否要登录.再弹出相应的提示.
还有就是表单内容多的地方,用户填写了好几十项.提交后发现一项不合要求.返回后又重新填写信息,这样的话,一般人都不会再去填那好几十项了.除非他真的要你网站的资源,而你又要他注册后才可用..
总之.AJAX可以用于网站的任何交互页面,但是也要注意控制量.并非都用AJAX那就是一个很棒的网站.关键还是在于用户
ajax 创建过程
创建ajax详细过程：
step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；
step3. 设置响应HTTP状态变化的函数；
step4. 发送HTTP请求；
step5. 获取异步调用返回的数据；
step6. 使用javascript和DOM实现局部刷新；
例题：
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleAJAX实例/title
script language="javascript" type="text/javascript"
/head
body
div id="myDiv"原数据/div
input type = "button" value = "更新数据" onclick = "getData()"
/body
/html