felayman---jquery___ajax
浏览数：16 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jquery的ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
在学jquery_ajax前,我们需要直到javascript中ajax对象的一些属性和方法
ajax的核心是XMLHttpRequest对象
XMLHttpRequest对象的所有属性
1.onreadystatechange 指定当readyState属性改变时的事件处理句柄
2.readyState 返回当前请求的状态
3.status 返回当前请求的http状态码.
4.statusText 返回当前请求的响应行状态
5.responseBody 将回应信息正文以unsigned byte数组形式返回
6.responseStream 以Ado Stream对象的形式返回响应信息
7.responseTest 将响应信息作为字符串返回
8.responseXML 将响应信息格式化为Xml Document对象并返回
XMLHttpRequest对象的所有方法
1.abort() 取消当前请求
2.getAllResponseHeader()获取响应的所有http头
3.getResponseHeader() 从响应信息中获取指定的http头
4.open() 创建一个新的http请求，并指定此请求的方法、URL以及验证信息
5.send() 发送请求到http服务器并接收回应
6.setRequestHeader() 单独指定请求的某个http头
*/
/*
1.实例化一个XMLHttpRequest对象
*/
function getXmlHttp() {
if (window.XMLHttpRequest) { // Mozilla、Safari等浏览器
return new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE浏览器
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX");
}
}
}
}
/*
从普通txt文本中获取内容
*/
//获取XMLHttpRequest对象
//xmlHttp = getXmlHttp();
//创建和服务器的连接
// xmlHttp.open("get","hello.txt",false);
//向服务器发送请求并接收回应
//xmlHttp.send(null);
//alert(xmlHttp.responseText);//会弹出hello.txt里的内容
/*
需要注意的是,我们必须把XMLHttpRequest的open方法的参数必须搞清楚
官方文档上是这样的原型:
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数解释:
1.bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感
2.bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址
3.varAsync 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数
4.bstrUser 如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口
5.bstrPassword 验证信息中的密码部分，如果用户名为空，则此值将被忽略
如果我们将上述代码中的第三个参数改为true的话,会发现,我们得不到服务器hello.txt文本的信息,因为采用
异步传输的方法的话,必须要指定当readyState属性改变时的事件
*/
/*
下面我们使用异步方式从服务器hello.php中获得数据,php代码很简单,如下:
<?php
echo ‘hello,php‘;
?>
*/
//xmlHttp.open("get","hello.php",true);
//这里的getTextFromPhp只是一个函数句柄
// xmlHttp.onreadystatechange = getTextFromPhp;
///xmlHttp.send(null);
//function getTextFromPhp(){
// if (xmlHttp.readyState == 4){
//会弹出hello,php,说明错哦从服务器端获取到了数据
// alert(xmlHttp.responseText);
// }
// };
/*
我们将上述的代码再稍微修改下,带上参数给hello.php,并让php文件返回我们
输入的内容
*/
function ajax(){
var xmlHttp = getXmlHttp();
var content = document.getElementById("name").value;
var bstrUrl = "hello.php";
bstrUrl = bstrUrl+"?param="+content;
var bstrMethod = "GET";
var varAsync = true;
xmlHttp.open(bstrMethod,bstrUrl,varAsync);
xmlHttp.onreadystatechange = getdata;
xmlHttp.send(null);
function getdata(){
//readyState返回XMLHTTP请求的当前状态
//值为4表示数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if(xmlHttp.readyState == 4){
//status=200表示ok,不要也没事
if(xmlHttp.status == 200){
alert(xmlHttp.responseText);//这里IE会出现乱码问题FireFox和chorme可以
}
}
}
}
/*
hello.php代码如下:
<?php
$content = $_GET[‘param‘];
echo ‘hello‘.$content;
?>
*/
/*
这里使用Jquery的ajax
1.ajax() 执行一个异步的HTTP(ajax)请求
2.ajaxComplete() 当ajax请求完成后注册的一个回调函数,是一个ajax事件
3.ajaxError() ajax请求出错的时注册一个回调函数,也是一个ajax事件
4.ajaxSend() 每当一个ajax请求即将发送时注册的一个回调函数是一个ajax事件
5.ajaxSetup() 设置未来的ajax请求默认选项
6.ajaxStart() 在ajax请求刚开始时执行一个处理函数
7.ajaxStop() 在ajax请求停止后隐藏加载信息
8.ajaxSuccess() 当ajax请求成功完成后显示的一个信息
9.get() 通过GET方法加载数据
10.getJSON() 通过get方法获取JSON格式的数据
11.getScript() 通过get方法获取脚本格式的数据
12.load() 载入远程html代码并插入语至dom中
13.param() 创建一个序列化的数组或者对象,适用于一个URL地址查询字符串或者ajax请求
14.post() 通过post方法加载数据
15.serialize() 将用作提交的表单元素的值编译成字符串
16.serializeArray() 将用作提交的表单元素的值编译成拥有name/value对象组成的数组
*/
$(function(){
//第一种格式
$("#jquery_ajax1").click(function(){
$.get("hello.txt",function(data){
alert("服务器端数据:"+data);
});
});
//第二种格式
$("#jquery_ajax2").click(function(){
var url = "hello.php";
var content = $("#name").val();
var value = "felayman";
$.get(url,{key1:content,key2:value},getdata);
function getdata(data){
alert(data);
}
});
});
</script>
</head>
<body>
<input type="text" value="" id="name"/>
<input type="button" value="ajax" onclick="ajax()"/>
<input type="button" id="jquery_ajax1" value="jquery_ajax"/>
<input type="button" id="jquery_ajax2" value="jquery_ajax"/>
</body>
</html>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
