文档章节

ajax技术核心

杀丶破狼
 杀丶破狼
发布于 2014/06/30 11:25
字数 499
阅读 25
收藏 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
博文 63
码字总数 11552
作品 0
南京
程序员
私信 提问
Java——Ajax+Tomcat完成异步请求

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

邵鸿鑫
2015/10/30
0
0
[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

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

LSantorini
2016/01/26
30
0
ajax-Ajax试题

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

吞吞吐吐的
2017/10/11
0
0
ajax jsonp其本质 用原生js来处理跨域的数据(jsonp)

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

BearCatYN
2015/06/04
0
0
【Ajax】Ajax总结

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

j15533415886
2017/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

并发+超时示例

func installMantisAgent() {log.Println("begin auto repair mantis agent")num := 0succNum := 0failNum := 0var Q *queue.Queueswitch g.Config().RepairType {ca......

我爱吃葱花
10分钟前
0
0
增加一列自增id

ALTER TABLE xxxx ADD iSiteId INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT FIRST;

colin_86
19分钟前
2
0
开发函数计算的正确姿势 —— 爬虫

在 《函数计算本地运行与调试 - Fun Local 基本用法》 中,我们介绍了利用 Fun Local 本地运行、调试函数的方法。但如果仅仅这样简单的介绍,并不能展现 Fun Local 对函数计算开发的巨大效率...

阿里云官方博客
23分钟前
0
0
安卓代码混淆

Proguard是安卓提供的方便开发者对代码和apk进行保护和精简的工具,可在SDK/tools文件夹下找到。 proguard的作用 : 1,代码混淆 2,精简代码,删掉没有用到的代码,减小apk的体积。 使用场景...

whoisliang
28分钟前
1
0
配置Tomcat虚拟主机

12月13日任务 16.4 配置Tomcat监听80端口 16.5/16.6/16.7 配置Tomcat虚拟主机 16.8 Tomcat日志 配置tomcat监听80端口 默认tomcat监听的是8080端口,如果想直接输入ip就访问到网页,就需要进行...

robertt15
34分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部