1. 实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象

    function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
    //高版本浏览器
    xhr = new XMLHttpRequest;
    }else{
    //IE低版本浏览器
    xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
    }
    var xhr = getXhr();
  2. 使用open方法与服务器建立连接
    open(method, url, async);
    xhr.open('post', 'data_montor.php', true);
    xhr.open('get', 'data_montor.php?user = name', true);
    //method 表示get/post
    //url 表示请求的地址
    //async 表示同步还是异步,async = true 异步(默认)
    //若将async设置为false,官方认为XMLHttpRequest就是实现异步交互的会进行警告
    //如果是get方法请求参数应跟在url之后,而不是通过send发送
  3. 客户端向服务器发送请求
    send(请求参数)方法
    //请求参数的格式 key = value
    xhr.send('user = xinyue')
    //注意:如果使用get方法,send不能向服务器发送请求数据,但是也不能忽略
    //需要写成 send(NULL); 然后请求数据应放在open方法中的Url之后
    //(详见上一步)
  4. 客户端接受服务器端的响应:使用onreadyStatechange 时间监听服务器的通信状态
    xhr . onreadystatechange  = function(){
    if(xhr.readyState == 4){
    if(xhr. status == 200){
    var data = xhr.responseText;
    //HTML格式使用responseText接收服务器端的相应数据,解析过程比较复杂(拆串),拆串拼串极易出错
    console.log(data);
    }
    }
    }

    readyState 得服务器端当前通信状态 : 
            0 服务器端尚未初始化
            1 正在发送请求
            2  请求完成
            3  请求成功,客户端正在接收服务器端的数据
            4  响应完成
    status :  1XX 信息类
                  2XX 成功
                  3XX 重定向
                  4XX 客户端错误
                  5XX 服务器端错误

原生Ajax实现异步交互的更多相关文章

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

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

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

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

  3. 原生AJAX如何异步提交数据?

    AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...

  4. jsp中使用原生js实现异步交互

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化.并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读 ...

  5. AJAX 异步交互基本总结

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

  6. ajax_异步交互-get/post方式

    Ajax的异步交互: 客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等). 实现Ajax的异步交互步骤(举例说明): get方式: 1.创建XMLHttpReq ...

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

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

  8. 原生ajax异步请求基础知识

    一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...

  9. Ajax异步交互基础

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

随机推荐

  1. 证明:对于一棵二叉树,若度为2的结点有n2个,叶子结点有n0个,则n0=n2+1

    假设二叉树的0度,1度,2度结点数分别为\(n_0\),\(n_1\),\(n_2\),总节点数为\(T\) 则按照结点求和有 \[T=n_0+n_1+n_2 (1)\] 按照边求和,因为节点数等于边 ...

  2. Python 获取类对象的父类

    参考 Get parent class name? Python 获取类对象的父类 给定一个类的对象a,要求获取该对象的父类. 方法: a.__class__.__bases__ 返回由该对象的父类组 ...

  3. dao层、service和action的运用和区别

    DAO层叫数据访问层,全称为data access object,属于一种比较底层,比较基础的操作,对于数据库的操作,具体到对于某个表的增删改查, 也就是说某个DAO一定是和数据库的某一张表一一对应的 ...

  4. robot framework---校验新增条数功能

    check总条数验证 [Arguments] ${beforevalue} ${endvalue} ${value} ${a} Evaluate '${beforevalue}'.replace('共 ...

  5. 解决问题:怎样在页面获取数组和List集合的长度

    解决问题:怎样在页面获取数组和List集合的长度 我们在前端遍历后台数据的时候,经常是从后台传过来一个数组或List集合,在前端页面就可以使用JSTL的<c:For each>标签遍历数据 ...

  6. CentOS yum换源

    1.备份系统自带yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.进入yum源配 ...

  7. Asp.net core Identity + identity server + angular 学习笔记 (第三篇)

    register -> login 讲了 我们来讲讲 forgot password -> reset password  和 change password 吧 先来 forgot pa ...

  8. JS-函数作用域

    如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量.

  9. scrapy框架使用笔记

    目前网上有很多关于scrapy的文章,这里我主要介绍一下我在开发中遇到问题及一些技巧: 1,以登录状态去爬取(带cookie) -安装内容: brew install phantomjs (MAC上) ...

  10. python实现汉诺塔问题

    汉诺塔问题可以简单描述成为将a柱子上的圆盘按一定规则借助b柱子完美地复制到c柱子上.现假设有a,b,c三根柱子,a柱子上的圆盘从上到下依次标号为1,2,3,……,n,且为递增状态.规则:每次移动一个盘 ...