不使用jquery来处理ajax请求该怎么做？
　　首先要明确html中的某些数据需要从服务端获得，也就是客户端向服务端请求（request）数据，服务端就响应（response）这个请求，把客户端要的数据给它。服务端返回的数据格式多样，即可以是字符串，也可以是数字，也可以是对象。客户端接到这些数据后按自己的需要处理后显示在Html页面上。这个处理工作就交给Javascript来做。
  　　Javascript处理Ajax异步请求要注意三点：
　　1、创建一个新的XMLHttpRequest对象;
　　2、创建一个获取数据的函数;
　　3、创建一个回调函数;

　　我们的目标是在文本框内输入名字传递给服务端，经过计算后在当前页面显示从服务端送回的数据。

<!DOCTYPE html>

<html>

  <body>

    <a href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/">Ajax study</a>

    </br>

    Enter your name:

    <input type="text" id="name" onChange="getInfo();" />

    </br>

    Show Ajax return data: <span id="getInfo"></span>

    <script type="text/javascript">

     // javascript Ajax

     // 创建新的请求对象

     var request =new XMLHttpRequest();

     // 获取数据

     function getInfo(){

       var name=document.getElementById('name').value;

       var url="/get_info/"+escape(name);

       // 打开请求

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

       // 指定回调函数

       request.onreadystatechange=updatePage;

       // 发送请求（发送的内容为null表示通过Get请求）

       request.send(null);

     }

     // 回调函数（服务器向网页发起调用）

     function updatePage(){

       if(request.readyState==4){

         if(request.status==200){

           // 读取响应文本

           var response=request.responseText;

           // 可以处理返回的文本。若是json字符串则可转为对象以便处理。

           // 转换为json对象的方式多种：

           var jsonObj=eval('('+response+')');

           // 或者：

           var jsonobj=JSON.parse(response);

           // 把数据返回给页面

           document.getElementById('getInfo').innerHTML=jsonobj.name;

           alert('You enter is : '+ jsonobj.name);

         }

       else if(request.status==404)

         alert('request url does not exist.');

       else

         alert('error:status code is :' + request.status)

       }

     }

    </script>

  </body>

</html>

这里的

 var response=request.responseText;

返回的就是一个字符串：

"{\n "age": 2,\n "name": "Hello world "\n}"


服务端代码：




# 这个显示 info.html 页面
@app.route('/info')

def xxx():

    return render_template('info.html')

# 这个是要执行的动作(必须要有个路由，html页面里的js需要这个url。函数名字随便起。）
@app.route('/get_info/<name>')

def x (name):

    ls ={'name':name, 'age':2}

    return jsonify(ls)




 


-- End --
												


											
Javascript与Ajax的更多相关文章
	

    
						
  1. 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
		
    其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新htm ...
    
		
    2. 
						
  2. 初识JavaScript，Ajax，jQuery，并比较三者关系
		
    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
    
		
    3. 
						
  3. JavaScript实现Ajax小结
		
    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
    
		
    4. 
						
  4. 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
		
    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
    
		
    5. 
						
  5. javascript版Ajax请求
		
    什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
    
		
    6. 
								
  6. javascript进阶——Ajax
		
    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
    
		
    7. 
						
  7. Javascript and AJAX with Yii（在yii 中使用 javascript 和ajax）
		
    英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...
    
		
    8. 
						
  8. javascript实现ajax
		
    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
    
		
    9. 
						
  9. JavaScript和ajax 跨域的案例
		
    今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 <!DOCTYPE html> <html xmlns="http://www ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 《一步一步写嵌入式操作系统》读书笔记1—Skyeye介绍、安装和HelloWorld
			
    2013-11-14 最近在看<一步一步写嵌入式操作系统>,感觉此书甚好,许多地方讲得很清楚.可操作性强,计划边读边实践边写笔记,希望能够逐步熟悉嵌入式操作系统底层的东西,最终剪裁出一套实 ...
    
			
    2. 
						
  2. 【hbase】使用thrift with python 访问HBase
			
    HBase 版本: 0.98.6 thrift   版本: 0.9.0 使用 thrift client with python 连接 HBase 报错: Traceback (most recent ...
    
			
    3. 
						
  3. 【hadoop代码笔记】hadoop作业提交之汇总
			
    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...
    
			
    4. 
						
  4. HDU-4738 Caocao's Bridges 边联通分量
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4738 题意:在有重边的无向图中,求权值最小的桥. 注意trick就好了,ans为0时输出1,总要有一个 ...
    
			
    5. 
						
  5. Linux Oracle服务启动&停止脚本与开机自启动
			
    在CentOS 6.3下安装完Oracle 10g R2,重开机之后,你会发现Oracle没有自行启动,这是正常的,因为在Linux下安装Oracle的确不会自行启动,必须要自行设定相关参数,首先先介 ...
    
			
    6. 
						
  6. 如何在不装ORACLE的情况下使用PLSQL
			
    原来我电脑装了oracle跟plsql,然后使用plsql的.后来因为某些原因,我重装了系统,把装的软件都格调了,需要重新装.当时在装plsql的时候我就想,我一直都是直接用plsql远程连接的服务器 ...
    
			
    7. 
						
  7. iOS异常捕获
			
    文章目录 一. 系统Crash 二. 处理signal 下面是一些信号说明 关键点注意 三. 实战 四. Crash Callstack分析 – 进⼀一步分析 五. demo地址 六. 参考文献 前言 ...
    
			
    8. 
						
  8. [转]directsound抓取麦克风PCM数据封装类
			
    网上有很多方法从麦克风读取PCM数据,不想一一举例.只是在这里发布一个我自己写的directsound的麦克风PCM数据采集类,通过它,可以很方便的利用directsound技术把麦克风的数据采集到, ...
    
			
    9. 
						
  9. Django 使用原生SQL
			
    def dictfetchall(cursor): "将游标返回的结果保存到一个字典对象中" desc = cursor.description return [ dict(zip ...
    
			
    10. 
						
  10. 一次线上OOM故障排查经过
			
    转贴:http://my.oschina.net/flashsword/blog/205266 本文是一次线上OOM故障排查的经过,内容比较基础但是真实,主要是记录一下,没有OOM排查经验的同学也可以 ...
    
			
    11.