Ajax的异步交互:

  客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等).

实现Ajax的异步交互步骤(举例说明):

  get方式:

  1.创建XMLHttpRequest核心对象

  

  var xhr=getXhr();

  2. 与服务器端建立连接

  xhr.open("get","01.php?user=zhangwuji");

  3. 客户端向服务器端发送请求

  //send()方法不起作用,但是不能被省略

  xhr.send(null);

  4. 客户端接收服务器端的响应
    xhr.onreadystatechange = function()

  {       

    if(xhr.readyState == 4 && xhr.status == 200)

    {         

      var data = xhr.responseText;         

      console.log(data);       

    }
   }

   post方式

  1.创建XMLHttpRequest核心对象

  

  2. 与服务器端建立连接

  xhr.open("post","01.php");

  3. 客户端向服务器端发送请求

  //send()方法起作用
     //在send()方法被调用前,使用setRequestHeader()方法设置请求头信息

   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 xhr.send("user=zhangwuji");

  4. 客户端接收服务器端的响应

  xhr.onreadystatechange = function()

  {       

    if(xhr.readyState == 4 && xhr.status == 200)

    {
        var data = xhr.responseText;
        console.log(data);
      }

   }

  

  

ajax_异步交互-get/post方式的更多相关文章

  1. AsyncTask异步交互和httpurlconnection结合使用

    //网络请求数据 package com.baidu.myutils; import java.io.BufferedReader; import java.io.InputStreamReader; ...

  2. AJAX 异步交互基本总结

    AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...

  3. Ajax异步交互基础

    1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...

  4. struts2实现jQuery的异步交互

    struts2中jQuery的异步交互有两种方式: 1)是利用构造字符串的方式来实现: 使用该方法主要是在服务器端根据前端的请求,返回一个字符串信息,然后前端的jQuery通过解析该字符串信息得到对应 ...

  5. struts2实现XML异步交互

    异步交互,在不用重新提交整个页面的情况下可以实现页面局部信息与服务器的交互.在编写异步交互时需要用到一个架包:dom4j,下载地址为:https://dom4j.github.io/ 下面通过例子说明 ...

  6. 实现AJAX的异步交互的步骤

    <input type="button" value="异步请求"id="btn"> <script> 实现ajax ...

  7. spring mvc 和ajax异步交互完整实例

    Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...

  8. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  9. Angular2+ 实现组件交互的众多方式

    实现组件交互有很多方式,下面列举. 1.父组件向子组件传递数据:(属性绑定) 父组件 [子属性名] = "父属性名" <child-content [data]=" ...

随机推荐

  1. 解决Robotium测试用例crash问题

    今天遇到一个棘手的问题 用robotium框架真机测试客户端时 跑到一半会crash 搜了一堆资料终于解决了 我的程序引起crash主要原因有两个: 1.用Robotium测试框架跑多个用例(写在同一 ...

  2. Unix/Linux环境C编程入门教程(4) Debian Linux环境搭建

    Unix/Linux版本众多,我们推荐Unix/Linux初学者选用几款典型的Unix/Linux操作系统进行学习. 1.广义的Debian是指一个致力于创建自由操作系统的合作组织及其作品,由于Deb ...

  3. 美国TJX公司 - MBA智库百科

    美国TJX公司 - MBA智库百科 TJX公司总部设在美国波士顿,在北美地区和许多欧洲国家开有连锁分店,仅在美国就有2500多家分店. TJX Companies, Inc. 是美国和全世界的服装和家 ...

  4. 面向对象程序设计-C++_课时12访问限制

    private: 只有这个类(相同的类,不同的对象也可以)的成员函数可以访问这些成员变量或函数 public: 任何人都可以访问 protected: 只有这个类以及它的子子孙孙可以访问

  5. IOS开发:xcode5版本引发的问题

    下面这段代码是用于处理ios7头部透明问题的 #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000 if ( IOS7_OR_LATER ) { self.e ...

  6. 新浪微博布局学习——妙用TabHost

    前言 为了更好的开发Android应用程序,除了熟练掌握基本的UI组件和API外,还需要掌握一些技巧,而这些技巧可以通过阅读一些代码来提高,本系列将与大家分享一些新浪微博布局方面的收获,欢迎交流! 声 ...

  7. CSS3六边形

    <!DOCTYPE html> <!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html --> ...

  8. This project references NuGet package(s) that are missing on this computer.

    Install Nuget. Right click on the solution and select "Enable NuGet Package Restore". Clic ...

  9. MMDrawerController 的实践,已经实现,几行简单的代码实现侧栏

    学习方法,看readme,看给的Demo 看功能怎么实现的去模仿,个人感觉模仿是最快的学习方法 废话少说,上代码 导入MMDrawerController框架我就不多少了,之后做什么才是我们才关注的事 ...

  10. wcf xml消息客户端cookie

    public override bool Login(string userName, string password) { using (HttpClient client = new HttpCl ...