网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

ajax菜鸟教程,jquery中ajax完整例子

2020-5-29 14:5:13 | 作者:老铁SEO | 0个评论 | 人浏览

  建议先从HTML/CSS上手,然后JavaScript/书籍选择犀牛书,如果还要学习jQuery选择锋利的jQuery。w3c或者菜鸟教程是电脑可以学习。等这些学习完毕,你对ajax就有一定的了解。


  推荐个ajax的视频教程..?


  jQuery是一套独立的javascript框架,里面包含了ajax功能的封装.


  传统的只说ajax,更多的指使用xmlHttpRequest对象进行纯ajax操作.


  所以,jQuery>ajax


  <<基于ASP.NET和AJAX的博客>>


  01_选材设计搭建母版.avi


  02_当前活动菜单定位处理.avi


  03_使用AuthenticationService实现登录.avi


  04_使用AuthenticationService实现注销和状态管理.avi


  05_使用RoleService实现角色管理.avi


  06_使用ProfileService实现Profile管理.avi


  07_使用jQuery插件实现用户注册(上).avi


  08_使用jQuery插件实现用户注册(下)注册细节调整_功能实现.avi


  09_管理日志分类_tabs插件使用.avi


  10_HTML编辑器插件及发表日志.avi


  11_使用jPage_AJAX获得分布数据.avi


  12_使用jBind绑定数据及细节完善.avi


  13_显示日志和评论列表.avi


  14_发表评论.avi


  15_发表评论及细节完善.avi


  16_按分类查看日志列表_友情链接实现.avi


  17_日志的编辑和删除.avi


  18_删除评论_存档记录.avi


  19_搜索功能_关于作者_站点地图_总结.avi


  AJAX入门教程哪里有?我需要学习下AJAX


  AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过AJAX,您的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,您的JavaScript可在不重载页面的情况与Web服务器交换数据。


  AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。


  AJAX可使因特网应用程序更小、更快,更友好。


  AJAX是一种独立于Web服务器软件的浏览器技术。


  教程1:传智AJax入门到精通实战【1.3GB】


  教程2:AJAX专家培练营AJAX视频教程【367MB】


  教程3:ASP.NET.AJAX深入浅出系列教程【450MB】


  教程地址:http://www.henanfilm.cn/view-2584-1.html


  基本Ajax操作的几个基本步骤


  JavaScript的功能这么强~没想到啊!!


  AJAX基本概念


  AsynchronousJavascriptandXML


  一、典型流程


  1、客户端触发异步操作


  区别于B->S->B的同步提交模式,有等待时间,异步式在客户操作同时又AJAX引擎与服务器交互,更加人性化和快捷


  2、创建新的XMLHttpRequest对象


  AJAX技术的核心与服务器交互的类


  3、与Server进行连接


  通过send()方法实现


  4、服务器端进行连接处理


  必须的


  5、返回包含处理结果的XML文档


  其实未必是XML文档,而是字符串TEXT


  6、XMLHttpRequest对象接收处理结果并分析


  7、更新页面


  二、原来的流程browser--àserver--àbrowser同步的编程模型,有等待的时间


  三AJAX的流程


  四、XMLHttpRequest对象


  1、属性


  readystate


  0描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化


  1描述一种"发送"状态;此时,代码已经调用了XMLHttpRequestopen()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器


  2描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。


  3描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。


  4描述一种"已加载"状态;此时,响应已经被完全接收


  responseText从AJAX引擎中拿出server返回的信息


  statusAJAX与sever交互成功没有?状态码200表示成功


  //-----AJAXBEGIN-----


  varxmlHttp;


  //定义变量用来装XMLHttpRequest


  functioncreateXMLHttpRequest(){


  if(window.XMLHttpRequest){


  xmlHttp=newXMLHttpRequest();


  //NSFIREFOX等的初始化XMLHttpRequest实例


  }elseif(window.ActiveXObject){


  xmlHttp=newActiveXObject("Microsoft.XMLHTTP");


  }


  //MS的流浪器的初始化XMLHttpRequest实例


  }


  //浏览器大战牺牲的产物,只有这样才能具有垄断地位,不过现在也在趋于标准化W3C出标准也是迟早的问题


  functionvalidate(){


  //提供DOM模式的入口方法,在事件中调用JAVASCRIPT函数即可进入AJAX引擎


  varvUserId=trim(document.getElementById("userId").value);


  if(vUserId!=""){


  createXMLHttpRequest();


  //上面的那个方法~初始化XMLHttpRequest,状态码为0


  varurl="user_validate.jsp?userId="+vUserId+"&timestamp="+newDate().getTime();


  //这里的URL里加入了时间戳,这样就不会提交到同一个页面,避免了IE缓存所产生的一些奇怪的问题,也不用清缓存了


  xmlHttp.open("GET",url,true);


  //准备提交给服务器进行事务处理,状态码变成2,具体的食物处理可以再user_validate.jsp中经行,不过我觉得提交给SERVERLET更好在JSP直接out.println("用户已经存在,代码=["+userId+"]");就可以被捕获我觉得挺奇怪的其实


  }


  xmlHttp.onreadystatechange=callback;


  //当状态码代发生变化的时候调用后面的函数


  xmlHttp.send(null);


  //提交给服务器进行处理


  }else{


  document.getElementById("resText").innerHTML="";


  }


  }


  functioncallback(){


  //状态码改变时调用


  if(xmlHttp.readyState==4){


  //确定了变化的状态,定位是服务器处理完毕


  if(xmlHttp.status==200){


  //确定了处理的结果,是服务器成功处理,不是404,500错误


  varresTextSpan=document.getElementById("resText");


  //DOM


  if(trim(xmlHttp.responseText)!=""){


  //获得服务器的响应结果,response以字符串的形式返回(TEXT)


  resTextSpan.innerHTML="<fontcolor='red'>"+xmlHttp.responseText+"</font>";


  //还是DOM


  }else{


  resTextSpan.innerHTML="";


  }


  }else{


  alert("请求失败,错误码="+xmlHttp.status);


  //返回错误信息


  }


  }


  }


  //-----AJAXEND-----


  AJAX引擎的一般步骤


  a)创建Ajax引擎对象XMLHttpReqest


  creatXMLHttpRequest();


  b)调用open方法与Ajax引擎建立连接,并告诉Ajax引擎我们的请求方式为get,请求url及采用异步方式


  c)告诉Ajax引擎处理完成后,如何把结果反馈给我们,我们通常指定一个方法句柄,那么Ajax就会调用我们指定的方法,从而就可以得到Ajax引擎返回的数据(这种方式一般称为回调机制)


  onreadystatrchange()=function(...)


  d)最后调用send方法把我们步骤b和c设置的参数发送给Ajax引擎(也就是真正的交给Ajax引擎去处理)


  实际过程


  validate(){


  createXMLHttpRequest();


  xmlHttp.open("GET",url,true);


  xmlHttp.onreadystatechange=function(...);


  xmlHttp.send(null);


  }


  其中响应处理在FUNCTION


  事务处理在URL


  我写的虽然有借鉴

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐