7.14号学习itcast ajax视频 笔记2
1.首先用XMLHttpRequest对象来进行简单的验证例子,在这例子里分get和post两种方式分别写例子,还有纯文本和xml两种返回
用户信息格式
post方法返回纯文本
准备工作: 开发工具IntelliJ 7.0 集成工具,jquery.js,
1.post.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hehe</title>
<script type="text/javascript" src="jslib/zhc2.js"></script>
</head>
<body>
========<br />
<input id="name" type="text" />
<input type="button" value="校验" onclick="verifyown()" />
<div id="result" ></div>
</body>
</html>
2.zhc2.js
var xmlhttp;
function verifyown() {
var username;
username = document.getElementById("name").value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
//针对特定浏览器进行bug修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
var activName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activName.length; i++) {
try {
xmlhttp = new ActiveXObject(activeName[i]);
break;
} catch(e) {
}
}
}
xmlhttp.onreadystatechange = callback;
//3. open参数
// http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
//请求的URL地址，可以为绝对地址也可以为相对地址
//布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
//第三个参数理解:如果为异步,则程序运行到这还会继续向下进行,如果是同步的,必须在send()方法处等服务器把数据返回来后才会向后运行.
//如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口
//验证信息中的密码部分，如果用户名为空，则此值将被忽略。
// xmlhttp.open("GET","zhc?name="+username,true);
//对于post方法来说:
//post :第二个参数只写url地址,不写跟着的信息
xmlhttp.open("POST","zhc",true);
// 自己设置http请求头,application/x-www-form-urlencoded可以满足大部分需要
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
//post方式发送数据 ,发给服务器的信息需要在这里面设置
xmlhttp.send("name="+username);
//到此,post和get没有别的区别了.
}
function callback(){
//onreadystatechange为了保证数据回来之后能够找到方法来执行,共5个状态
//每个状态的变化都会运行callback()的方法
//0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
//1 (初始化) 对象已建立，尚未调用send方法
//2 (发送数据) send方法已调用，但是当前的状态及http头未知
//3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
//4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
//判断服务器返回状态,看对象是否交互完成
if(xmlhttp.readyState== 4) {
if(xmlhttp.status == 200){
//获取服务器返回对象
//杜宇httprequest对象返回对象的形式两种,一种是纯文本,一种是xml方式
var fanhuizhi = xmlhttp.responseText;
//用dom方式返回,先得到节点
var divNode = document.getElementById("result");
//把该节点的值设置为刚得到的值
divNode.innerHTML = fanhuizhi ;
}
}
//个人认为:fierbug只能调试语法之类的错误,如果你是因为对象名字,大小写等写错则不会提示error.只能一个一个区查对象
}
其实get和post不同主要是在向服务器传送的时候有差别,体现在open()方法和send()方法中.其它地方都一样