Javascript与Ajax

　　不使用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;

返回的就是一个字符串：

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

服务端代码：

# 这个显示 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 --