7.14号学习itcast ajax视频 笔记1
1.首先用XMLHttpRequest对象来进行简单的验证例子,在这例子里分get和post两种方式分别写例子,还有纯文本和xml两种返回用户信息格式
get方法返回纯文本
准备工作: 开发工具IntelliJ 7.0 集成工具,jquery.js,
1.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/zhc1.js"></script></head><body> ========<br /> <input id="name" type="text" /> <input type="button" value="校验"/> <div id="result" ></div></body></html>
2.zhc.js
var xmlhttp; //定义全局变量function verifyown() { //使用Document对象来获取节点数据 //document一定要小写[一定注意],从页面取得要准备处理的值 var username = document.getElementById("name").value; //1.创建XMLHttpRequest对象,如果不用框架,需要根据浏览器来应用不同的js //也就是首先要判断浏览器的种类 //在js中,如果条件不为null,false,undefine都可以成立 if (window.XMLHttpRequest) { //针对filerfox,mozillar,IE7,IE8,opera //创建一个httprequest对象来跟服务器交互 xmlhttp = new XMLHttpRequest(); //针对特定浏览器进行bug修正 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //适合IE6 ,不过所有ie浏览器都会支持该对象 //利用以前IE的控件来创建 XMLHttpRequest对象. //版本较新的排在前面 var activName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < activName.length; i++) { try { xmlhttp = new ActiveXObject(activeName); break; } catch(e) { } } } //2.注册回调函数,函数名后面不加括号,需要把回调函数的函数名注册给httprequest对象,而 //加上括号,是代表运行该函数.返回的是运行后的值 xmlhttp.onreadystatechange = callback; //3. open参数 // a :http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 // b :请求的URL地址，可以为绝对地址也可以为相对地址 // c : 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 //第三个参数理解:如果为异步,则程序运行到这还会继续向下进行,如果是同步的,必须在send()方法处等服务器把数据返回来后才会向后运行. //如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口 //验证信息中的密码部分，如果用户名为空，则此值将被忽略。 xmlhttp.open("GET","zhc?name="+username,true); //4.发送参数和服务器端交互. 因为是get方式,不用再传多余内容. //同步方式下,send()会在数据返回后才执行,也就是程序在此挂起. xmlhttp.send(null); }function callback(){ //onreadystatechange为了保证数据回来之后能够找到方法来执行,共5个状态 //每个状态的变化都会运行callback()的方法,也就是说一个异步互动后,callback需要调用5次 //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.只能一个一个区查对象}
页:
[1]