ajax学习笔记

ajax其实就是客户端增加了Ajax engine对象，即XMLHttpRequest对象。学ajax，就是学习XMLHttpRequest对象的属性和方法。

1.如何创建ajax

①创建XMLHttpRequest对象

var request = new XMLHttpRequest();//readyState = 0

0表示XHttpRequest对象已建立，但还未初始化，这时尚未调用open方法.

这个request既发送请求，又接收响应。

②使用XMLHttpRequest对象创建请求,也就是使用open方法

request.open("post","AjaxServlet",true);//readyState = 1

这表示使用post方法传值到AjaxServlet，状态这一属性不推荐使用false，所以一般使用true。

readyState =1表示open方法已调用，但未调用send方法，即“已创建，未发送”

③写回调函数接收服务器返回的数据

request.onreadystatechange = function(){
	if(request.readyState==4){        //数据成功接收
		if(request.status==200){  //表示服务器一切正常
			var result = request.responseText;
		}else if(request.status==500){
			alert("服务器内部错误");
		}	

	}

}

④发送请求，严格地来说，这是第三步

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("a=10&b=20");//readyState = 2
//get方法括号内为null，post方法则为传递的参数

readyState = 2表示send方法已经调用，其他数据未知

上述使用的是post方法，如果②中使用get方法，即

request.open("get","AjaxServlet?a=10&b=20",true);

则相应地④也要发生变化

request.send(null);//如果不写null火狐会报错

二者不同之处在于参数位置。

2.javascript中，函数也是引用。如：

function test(){}
var test = function(){}；//这二者是等价的

再举一个例子

<body>
	<input type="button" value="测试" onclick="test()">
</body>

和下边的写法是一样的。

<body onload="document.getElementById('c')".onclick="test">
	<input type="button" value="测试" id="c">
</body>

注意:此时onclick="test"中没有括号，否则会立即执行。

3.document和window是什么关系？
document只是window的属性。

4.在js中，函数建立的三个方式中

function test(a1,a2){};//会预先加载
var test = function(){};//不会预先加载,使用时才会加载
new Function(){};// 上边两种的实质都是这第三种

5.闭包，通俗一点的说法就是函数里边还有函数。

6.jquery官方js中的函数格式为

(function(window,undefined){})(window);

也可以写成

(function(t,undefined){})(t);

其中，后边加(window)是为了提高函数加载效率，undefined是为了防止外部对undefined进行赋值导致jquery出错。
7.ajax接收数据的3种方式，json方式最好用
①普通的文本数据

req.responseText;//得到返回的文本数据

②XML数据(客户端)

req.responseXML.getElementByTagName("name")[0].firstChild.data;

③json数据(浏览器端)

var a = XmlHttp.responseText;
eval("var c = " + a);//通过eval函数将返回的文本转换为json对象
alert(c.name);
alert(c[2].name);//返回数组的时候

8.json中字符串转意需要“\”,如

response.getWriter.println("{name:\"张三\",pwd:123}");

注意斜杠的位置。主要是用来转意双引号，因为name为字符串类型，需要打双引号，而直接写肯定不行，需要转意才能正常输出。

9.ajax接收xml数据

var req = new XMLHttpRequest();//新建ajax对象
var result = req.responseXML;//先接收xml数据

然后可以使用这样的

var name = result.getElementById("name")[0].firstChild.data;//不要忘记[0]

当xml结构较复杂时，这样就比较麻烦。可以写成

var name = result.selectNodes("/resume/son/son/name");
//这样得到的name是一个数组
alert(a[0].firstChild.data);//注意不是a[0].name

xml比较复杂，所以json使用的更多。
10.使用别名可以稍微加快查询速度。
11.当页面有多个js需要导入时，可先将这多个js引入到一个js文件内，使用时再引入这个合并后的。如：
原来需要引入的为：

<script type="text/javascript" src="js/selectNodes.js"></script>
<script type="text/javascript" src="js/sxt.js"></script>

可新建一个js，命名为sxtutil.js，内容为

document.write("<script type='text/javascript' src='js/sxt.js'></script>");
document.write("<script type='text/javascript' src='js/selectNodes.js'></script>");

使用时直接引入sxtutil.js即可，实际上并没有减少什么，作为了解即可。
12.jsp页面中的base标签<base href="<%=basePath%>">，是用来标记相对路径的，表示项目目录的根路径。以后浏览器中的地址都是相对base的。如：

http://localhost:8080/testAjax

就表示的是basePath

13.jQuery中也有ajax，但它与原生的ajax的不同之处就是jquery对原生的ajax进行了封装，可以使我们更方便的使用ajax

相关推荐