前端之家收集整理的这篇文章主要介绍了
Ajax的总结,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
====ajax=== asychronous javascript and xml (异步的javascript和xml) 为了
解决传统的web应用中"等待--响应--等待"的弊端而创建的一种技术. 原理:使用浏览器内置对象(XmlHttpRequest)向服务器发送请求,服务器返回xml或者文本数据给浏览器,然后浏览器使用这些数据更新部
分页面. 整个过程,
页面无刷新 1.开发步骤 step1:获得XMLHttpRequest对象[存在浏览器差异] IE7之前:new ActiveXObject("Microsoft.XMLHttp"); IE7和之后,Firefox:new XMLHttpRequest(); step2:使用该对象向服务器发送请求 1)get方式 //定义提交方式,请求路径以及参数,是否是异步发送请求 xhr.open("get",url,true|false); //
注册监听器,当xhr状态产生变化时触发 xhr.onreadystatechange=function(){ //服务器响应数据完毕,返回的状态正常 if(xhr.readyState==4&&xhr.status==200){ var txt = xhr.responseText;//获得服务器以文本类型返回的数据 } } //发请求,请求参数,由于get方式的参数在请求中,此处只需填写null xhr.send(null); --readyState:返回数据的状态: 0:未进行初始化(对象xhr已经创建,还没有初始化) 1:初始化完毕(xhr对象已经初始化,还未发请求) 2:发送数据(send
方法被
调用) 3:响应数据在传输中(开始接受响应数据,但是未接受完毕) 4:响应结束(响应数据全部结束完毕) --Ajax异常处理 通过xhr.status获得服务器状态码来判断是否正常响应: xhr.status:服务器返回的状态码
404:
页面找不到 500:服务器内部
错误 200:响应正常 --get方式
中文处理 由于浏览器对于地址栏的编码处理不同而造成乱码.
解决方式: 在js中使用encodeURI("请求地址和参数"); 2)post方式 基本同get方式 区别: a.post提交方式要设置请求的消息头,数据以何种形式提交 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 注意: 写在open
方法之后,send
方法之前 b.
用户参数在send
方法中传递 xhr.send("name=xx&pwd=xxx"); 2.ajax技术优点: 1)
页面没刷新 2)异步发送请求,不会打断
用户的操作,
用户的体验性高 3)标准技术,无须
插件 3.响应xml格式的数据(参考ajaxDemo项目下的tableDemo.jsp,AjaxTableServlet.java) 4.JSON Javascript Object Notation:轻量级的数据交换标准.即将符合特定语法的字符串转换成js能够操作的对象. 1)json的语法: a.json创建对象:{
属性1:值1,
属性2:值2,....} b.json创建数组:[值1,值2,值3] c.json创建对象数组:[{
属性1:值1,..},{
属性1:值1,},] 注意:
属性名最好使用引号,如果值为String类型,最好使用引号 2)如何实现json对象和字符串的相互转换? step1: 导入第三方的json2.js step2:使用json2.js提供的
函数实现转换 //将Json对象-->string var str = JSON.stringify(obj); //String-->Json对象 var obj = JSON.parse(str); 注意:str一定是符合json语法的字符串. 3)如何实现将json格式的字符串和java对象相互转换? step1:导入JSON解析的jar包 commons-beanutils.jar commons-collection.jar commos-lang.jar commons-logging.jar ezmorph-1.0.6.jar json-lib.jar step2:使用json解析包实现转换 --将java对象-->json格式字符串 a.单个对象-->json JSONObject.fromObject(obj); b.list-->json JSONArray.fromObject(list); c.map-->json 以上两种都可以 --将json格式字符串-->java对象 3 4 --》 --》 java对象《--json对象《--string 1 2 1. json.toBean(jsonObject,className.class); 2. json.parse(string); 3. 3.1jsonArray.fromObject(javaObjectList); 3.2jsonObject.fromObeject(javaObect); 4. json.stringify(jsonObject);