ajax学习笔记
发布时间：2020-12-15 22:01:02 所属栏目：百科 来源：网络整理
导读：ajax其实就是客户端增加了Ajax engine对象，即XMLHttpRequest对象。学ajax，就是学习XMLHttpRequest对象的属性和方法。 1.如何创建ajax ①创建XMLHttpRequest对象 var request = new XMLHttpRequest();//readyState = 0 0表示XHttpRequest对象已建立，但还未
|
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是什么关系？ 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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |