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);

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...