Ajax核心概念的神秘面纱(5)

开门芝麻2

开门芝麻2

2016-02-19 14:10

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的Ajax核心概念的神秘面纱(5)教程,一起来看看吧!超容易上手~
发出请求
  
  您已经有了一个崭新的XMLHttpRequest对象,现在让它干点活儿吧。首先需要一个Web页面能够调用的JavaScript方法(比如当用户输入文本或者从菜单中选择一项时)。接下来就是在所有Ajax应用程序中基本都雷同的流程:
  
  从Web表单中获取需要的数据。
  
  建立要连接的URL。
  
  打开到服务器的连接。
  
  设置服务器在完成后要运行的函数。
  
  发送请求。
  
  清单5中的示例Ajax方法就是按照这个顺序组织的:
  
  清单5.发出Ajax请求
  
  functioncallServer(){
  
  //Getthecityandstatefromthewebform
  
  varcity=document.getElementById("city").value;
  
  varstate=document.getElementById("state").value;
  
  //Onlygooniftherearevaluesforbothfields
  
  if((city==null)||(city==""))return;
  
  if((state==null)||(state==""))return;
  
  //BuildtheURLtoconnectto
  
  varurl="/scripts/getZipCode.php?city="+escape(city)+"&state="+escape(state);
  
  //Openaconnectiontotheserver
  
  xmlHttp.open("GET",url,true);
  
  //Setupafunctionfortheservertorunwhenit'sdone
  
  xmlHttp.onreadystatechange=updatePage;
  
  //Sendtherequest
  
  xmlHttp.send(null);
  
  }
  
  其中大部分代码意义都很明确。开始的代码使用基本JavaScript代码获取几个表单字段的值。然后设置一个PHP脚本作为链接的目标。要注意脚本URL的指定方式,city和state(来自表单)使用简单的GET参数附加在URL之后。
  
  然后打开一个连接,这是您第一次看到使用XMLHttpRequest。其中指定了连接方法(GET)和要连接的URL。最后一个参数如果设为true,那么将请求一个异步连接(这就是Ajax的由来)。如果使用false,那么代码发出请求后将等待服务器返回的响应。如果设为true,当服务器在后台处理请求的时候用户仍然可以使用表单(甚至调用其他JavaScript方法)。
  
  xmlHttp(要记住,这是XMLHttpRequest对象实例)的onreadystatechange属性可以告诉服务器在运行完成后(可能要用五分钟或者五个小时)做什么。因为代码没有等待服务器,必须让服务器知道怎么做以便您能作出响应。在这个示例中,如果服务器处理完了请求,一个特殊的名为updatePage()的方法将被触发。
  
  最后,使用值null调用send()。因为已经在请求URL中添加了要发送给服务器的数据(city和state),所以请求中不需要发送任何数据。这样就发出了请求,服务器按照您的要求工作。
  
  如果没有发现任何新鲜的东西,您应该体会到这是多么简单明了!除了牢牢记住Ajax的异步特性外,这些内容都相当简单。应该感激Ajax使您能够专心编写漂亮的应用程序和界面,而不用担心复杂的HTTP请求/响应代码。
  
  清单5中的代码说明了Ajax的易用性。数据是简单的文本,可以作为请求URL的一部分。用GET而不是更复杂的POST发送请求。没有XML和要添加的内容头部,请求体中没有要发送的数据;换句话说,这就是Ajax的乌托邦。
  
  不用担心,随着本系列文章的展开,事情会变得越来越复杂。您将看到如何发送POST请求、如何设置请求头部和内容类型、如何在消息中编码XML、如何增加请求的安全性,可以做的工作还有很多!暂时先不用管那些难点,掌握好基本的东西就行了,很快我们就会建立一整套的Ajax工具库。
  
展开更多 50%)
分享

猜你喜欢

Ajax核心概念的神秘面纱(5)

Web开发
Ajax核心概念的神秘面纱(5)

Ajax核心概念的神秘面纱(6)

Web开发
Ajax核心概念的神秘面纱(6)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Ajax核心概念的神秘面纱(4)

Web开发
Ajax核心概念的神秘面纱(4)

Ajax核心概念的神秘面纱(1)

Web开发
Ajax核心概念的神秘面纱(1)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax核心概念的神秘面纱(2)

Web开发
Ajax核心概念的神秘面纱(2)

Ajax核心概念的神秘面纱(3)

Web开发
Ajax核心概念的神秘面纱(3)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PowerPoint2007下备注的添加方式

PowerPoint2007下备注的添加方式

ajax乱码解决方法

ajax乱码解决方法
下拉加载更多内容 ↓