文档章节

ajax技术核心

杀丶破狼
 杀丶破狼
发布于 2014/06/30 11:25
字数 499
阅读 25
收藏 0
点赞 0
评论 0
/**
 * AJAX技术核心
 * 
 * <input name="name" .../> 提交name
 * 
 * 1.创建XMLHTTPRequest
 * 2.设置回调函数
 * 3.使用open方法与服务器建立连接
 * 4.send,向服务器数据发送
 * 5.在回调函数针对不同响应状态进行处理
 */
var xmlhttp;
//用户名校验
//使用XMLHTTPrequest对象进行AJAX对象交互
function verify(){
 var name = document.getElementById("name").value;
 
 //创建XMLHTTPrequest对象
 //需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
 if(window.XMLHttpRequest){
  //针对主流浏览器
  xmlhttp = new XMLHttpRequest();
  //针对某些版本的浏览器进行BUG修正
  if(xmlhttp.overrideMomeType){
   xmlhttp.overrideMimdeType("text/xml");
  }
 }else if(window.ActiveXObjext){
  //IE6,IE6-
  //两个可以用于创建XMLHttpRequest对象的控件名称保存在js数组中
  var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0;i<activeName.length;i++){
   try {
    xmlhttp = new ActiveXObject(activeName[i]);
    break;
   } catch (e) {
    //
   }
  }
 }
 //确认XMLHTTPrequest对象创建成功
 if(!xmlhttp){
  alert("XMLHttpRequest对象创建失败");
 }else{
  //alert(xmlhttp);
 }
 
 //注册回调函数(函数名,不需要加括号)
 //如果加上括号,就会把函数的返回值注册上,error
 xmlhttp.onreadystatechange = callback;
 
 //设置连接信息
 //第三个参数表示采用异步还是同步方式交互,true为异步
 xmlhttp.open("GET","ajaxServlet?name="+name,true);
 
// xmlhttp.open("POST","ajaxServer",true);
 //POST需要自己设置http的请求头
// xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
 
 //发送数据,和服务器端进行交互
 //get方式的数据全部在url里面,所以为null
 xmlhttp.send(null);
 
 //POST方式发送数据
// xmlhttp.send("name="+name);
}
//回调函数
function callback(){
 //判断对象的状态是否交互完成
 if(xmlhttp.readyState == 4){
  //判断http的交互是否成功
  if(xmlhttp.status == 200){
   //使用responseXML的方式来接受xml数据对象
   var domObj = xmlhttp.responseXML;
   //利用getElementByTagName根据标签前面来获取元素
   var messageNode = domObj.getElementsByTagName("message");
   if(messageNode.length > 0){
    //var responseMessage = messageNode[0].innerHTML;
    var textNode = messageNode[0].firstChild;
    //nodeValue返回文本节点的文本内容
    var responseMessage = textNode.nodeValue;
    
    //将数据显示在页面上
    var divNode = document.getElementById("result");
    divNode.innerHTML = responseMessage;
   }else{
    alert("xml数据出错:"+xmlhttp.responseText);
   }
  }
 }
}

© 著作权归作者所有

共有 人打赏支持
杀丶破狼
粉丝 8
博文 58
码字总数 11552
作品 0
南京
程序员
Java——Ajax+Tomcat完成异步请求

Ajax最为网页异步交互技术相信大家并不陌生,这里我也不做过多介绍,详情点击(百度百科)。很多框架也封装了Ajax技术,使用起来更加简单,比如jQuery等等,这里为了了解原理,我们使用原生的...

邵鸿鑫 ⋅ 2015/10/30 ⋅ 0

[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

Ajax的全称是 Asynchronous JavaScript And XML,即异步JavaScript和XML。2005年由Jesse James Garrett首先提出。在之后极短的时间内,Ajax被广泛应用到大量B/S结构的应用中,改进了传统的W...

LSantorini ⋅ 2016/01/26 ⋅ 0

Ajax面试知识点总结

Ajax面试知识点总结 1、Ajax (Asynchronous JavaScript and XML) Ajax定义:允许客户端浏览器与服务器通信,无须刷新当前页面的技术就为ajax技术。 2、不刷新页面,与服务器通信的技术有aja...

妞妞超人 ⋅ 2013/02/26 ⋅ 0

jquery实现跨域传输数据

$.ajax({url:"http://join.fruit84.com/?a=jobList",type:"get",async:false,dataType:"jsonp",success:function(data){data = JSON.parse(data);console.log(data);}}) 1、ajax和jsonp这两种......

Noin ⋅ 2013/05/31 ⋅ 4

ajax-Ajax试题

ylbtech-doc:ajax-Ajax试题 Ajax 1.A,Ajax试题返回顶部 001.{Ajax题目}使用Ajax可带来便捷有()(选择3项) A)减轻服务器的负担 B)无刷新更新页面 C)可以调用外部数据 D)可以不使用Javas...

吞吞吐吐的 ⋅ 2017/10/11 ⋅ 0

ajax jsonp其本质 用原生js来处理跨域的数据(jsonp)

说明总结: 1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。 2.但是ajax和jsonp在...

BearCatYN ⋅ 2015/06/04 ⋅ 0

php+ajax长轮询实现web即时聊天

web im的实现方式有很多种: 1.普通轮询,原理通过js定时重复发送ajax请求服务端,获取数据后显示。 2. 长轮询,ajax请求服务端,服务端有数据会立即返回。服务端无数据时会一直等待,直到有...

hgditren ⋅ 2017/01/10 ⋅ 0

【Ajax】Ajax总结

一、什么是Ajax: 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax(AsynchronousJavaScript and XML)。不用刷新整个页面便可与服务器通讯的办法。比如:高德地图就是不用刷新...

j15533415886 ⋅ 2017/12/10 ⋅ 0

PHP中Push(推送)技术的探讨

随着人们对Web即时应用需求的不断上升,Server Push(推送)技术在聊天、消息提醒尤其是社交网络等方面开始兴起,成为实时应用的数据流核心。这篇日志试图探讨的便是各种适合于PHP的Push的实现...

lg2045 ⋅ 2014/08/25 ⋅ 1

可扩展的轻量级 web 框架 - openhandx unreal

OpenHandx-Unreal是一个可扩展的轻量级web框架。Unreal以Ajax技术为核心,开创了SS(Script-Service)脚本服务框架开发模式,并完全兼容MVC(Model-View-Controller)框架。SS框架可以轻易完...

辛巴8 ⋅ 04/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 26分钟前 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 29分钟前 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 30分钟前 ⋅ 0

IT行业的变革就像世界杯德国对战墨西哥一样难以预测[图]

最近在观看世界杯,尤其是昨天的比赛,上一届卫冕冠军德国队居然0:1告负墨西哥,这创造了历史,首先是墨西哥从来没赢过德国队,其次是德国队36年来首站没输过,再差也是打平,而这次,德国队...

原创小博客 ⋅ 49分钟前 ⋅ 0

解决CentOS6、7,/etc/sysconfig/下没有iptables的问题

一、Centos 6版本解决办法: 1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptables服务进行保存: service iptables save 3.重启iptables服务: service ...

寰宇01 ⋅ 59分钟前 ⋅ 2

数据库备份和恢复

备份:mysqldump -u root -p 数据库>磁盘路径 恢复:mysql -u root -p 数据库<sql脚本的磁盘路径

anlve ⋅ 今天 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部