ajax相关体会

参考原文：

例子：http://blog.csdn.net/beijiguangyong/article/details/7725596

原理讲解：http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

本科学习ajax，老师一直给讲解各种控件的使用方法，导致学完ajax，根本什么都不理解。后来有幸进入了校实验室，跟着实验室项目学习，也一直是让用$.ajax(),只知道这个东西就是ajax，可以异步刷新，甚至不知道什么叫做异步刷新，只是一直谨记老师的话，可以提升用户体验，怎么怎么好。如今开始学习php，才第一次正式的认识ajax，才第一次明白当初怎么也记不住名字的XMLHttpRequest究竟是个什么东西。不能说非常理解，至少使用起来不再是那么的迷茫。至今尚未弄懂微软及谷歌的底层是如何实现对ajax的支持的，xmlhttprequest类的具体的实现也不懂，但至少知道如何不使用$.ajax()来写创建自己的XMLHttpRequest对象了。

  1. <script type="text/javascript">
  2. //创建XMLHttpReques对象
  3. function createXMLHttpRequest(){
  4. if(window.XMLHttpRequest){
  5. //Mozilla浏览器
  6. XMLHttpReq=new XMLHttpRequest();
  7. }else{
  8. //IE浏览器
  9. if(window.ActiveXObject){
  10. try{
  11. XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
  12. }catch(e){
  13. try{
  14. XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
  15. }catch(e){}
  16. }
  17. }
  18. }
  19. }
  20. //处理服务器响应结果
  21. function handleResponse() {
  22. // 判断对象状态
  23. if (XMLHttpReq.readyState == 4) {
  24. // 信息已经成功返回，开始处理信息
  25. if (XMLHttpReq.status == 200) {
  26. var out = "";
  27. var res = XMLHttpReq.responseXML;
  28. var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
  29. //5. 解析服务器返回的信息,更新用户界面
  30. document.getElementById("Hello").innerHTML = response;
  31. }
  32. }
  33. }
  34. //发送客户端的请求
  35. function sendRequest(url){
  36. //1.创建XMLHttpRequest
  37. createXMLHttpRequest();
  38. //2.设置回调函数
  39. XMLHttpReq.onreadystatechange=handleResponse;
  40. //3.初始化XMLHttpRequest组建并发送请求
  41. XMLHttpReq.open("GET",url,true);
  42. //发送请求
  43. XMLHttpReq.send(null);
  44. }
  45. //开始调用Ajax的功能
  46. function sayHello()
  47. {
  48. var name=document.getElementById("name").value;
  49. //发送请求
  50. sendRequest("SayHell?name="+name);
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <font size="1">
  56. name:<input type="text" id="name"/>
  57. <input type="button" value="提交" onclick="sayHello()"/>
  58. <div id="Hello"></div>
  59. </font>
  60. </body>
  61. </html>
  62. 至于后台接收了数据该如何处理，以及如何封装成json数据格式，如何传输更多格式等，请期待后期更新。
时间： 2024-08-04 01:48:43

ajax相关体会的相关文章

Ajax相关

1.首先创建Ajax请求对象,即XMLHttpRequest对象,大多数浏览器都内建了该对象,当然大多数一般和IE6关系不大,所以针对这一点,再获得该对象时,需要做一些处理: 1 var xmlhttp; 2 if (window.XMLHttpRequest) 3 {// code for IE7+, Firefox, Chrome, Opera, Safari 4 xmlhttp=new XMLHttpRequest(); 5 } 6 else 7 {// code for IE6, IE5

ajax相关类web前端面试题

ajax相关类 1. ajax的跨域问题和缓存原理? 答: 推荐:ajax处理跨域有几种方式?实现原理是什么? 推荐:ajax缓存原理 2. 同步与异步的区别? 答: 1. 同步请求:顺序处理,即当我们向服务器发出一个请求时,在服务器没返回结果给客户端之前,我们要一直处于等待状态直至服务器将结果返回到客户端,我们才能执行下一步操作. 2. 异步请求:并行处理,当我们向服务器发出一个请求时,在服务器没返回结果之前,我们还是可以执行其他操作. 3. ajax属于javascript? 答:javas

jQuery.ajax相关

jQuery.ajax(url,[settings]) 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.ajax()

Django——Ajax相关

Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求: 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点

Ajax相关(原生ajax，jQuery中ajax，axios)

1. get和post请求 从服务端获取数据:get请求 请求参数在地址栏中以urlencoded形式显示 格式:username=xcr&userAge=18 通过location.search可获取当前地址栏中 ? 及其后面的请求参数内容 可发送 2kb左右的数据 只能发送文本形式的数据 get请求可以被缓存,将地址保存,这个请求所携带的请求参数都将被保存 给服务端发送数据:post请求 post请求的参数在请求体中,不会在地址栏中体现,发送一些隐私数据时使用post请求发送,相对get请求

改造百度ueditor字体为rem及相关体会

提到富文本,可能大家都用到过百度的ueditor,作为一个重量级的插件,总结起来一句话,功能很强大,使用很费心.不知道是不是太久没有维护了,ueditor的文档可读性还真是差也可能是悟性不够吧.本文也不是使用教程,只是简单总结一下如何更改字体设置为rem. 一.问题 因为ueditor是pc端的富文本,所以一切字体大小都是以px为单位,但是我们项目需要在移动端来显示,并且移动端的项目都类似淘宝flexible那样做了高清屏幕的适配,这样原原本本的pc上的发布的内容在app上可能就张下面这个样子了

JQuery（三） Ajax相关

JQuery大大简化了Ajax通用操作,开发者只需要指定请求URL,回调函数即可. 三个主要方法: $().param(obj):将obj参数(对象或数组)转化成查询字符串. {name:"疯狂Java讲义", price:109}转换出的查询字符串为:name=%E7%96%AF%E7%8B%82Java%E8%AE%B2%E4%B9%89&price=109 serialize():将表单或表单控件转化成查询字符串. user=vince&desc=%E4%BB%8

前端相关技术之ajax相关

AJAX技术点 async javascript and xml:异步的js和xml,用js异步去操作xml ajax用于数据交互,不能操作DOM –节省用户操作,时间,提高用户体验,减少数据请求 –传输获取数据 使用场景:局部刷新页面,手机验证码验证发送ajax请求 window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { //打开浏览器 /* 1.创建

AJAX相关JS代码片段和部分浏览器模型

在.net开发中,充分利用免费控件是好事情,同样的,在php的开放中,能使用ajax的类库是可以,但是如果不能修改控件或者类库达到自己的需求,就要动用JS大法了,前提是研究好浏览器模型 的各种对象的方法属性.尤其是熟悉CSS+HTML就会做的很酷.就JS语言本身来说要求不高. 1.动态删除Table 里面内容技巧,不需要写太多代码,一行: tb.removeNode(true)3g.mlybyby.com 2.动态增加行,除了CreateElement方法,还可以这样比较短小: 3.在DIV中动