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. oracle sql生成临时递增数据

    1.生成1至10记录 select rownum from dual connect 结果: 12345678910 2.生成最近12个月记录 ), 'yyyyMM') time from dual ...

  2. selenium修改cookie

    WebDriver操作cookie的方法:cookie以字典形式保存 get_cookies()     获取所有的cookie get_cookie(name)   返回字典的key为"n ...

  3. Java核心知识盘点(一)- 数据存储

    MySQL 索引使用的注意事项 1.索引的目的:在于提高查询效率,插入和更新的操作,数据库的操作是慢的,但是查询操作会非常快,索引可以对表中一个或多个字段进行加索引动作. 2.索引的类型: 1.唯一索 ...

  4. lambda表达式应用在闭包中

    def make_repeat(n): return lambda s : s * n a = make_repeat(2) print(a(8)) 等于 def make_repeat(n): de ...

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

    ABAC (Attribute Based Access Control) 基于属性得权限管理. 属性就是 key and value 表达力非常得强. 我们可以用 key = role value ...

  6. Kafka+OpenCV 实现实时流视频处理

     1. 启动Kafka Server bin/kafka-server-start.sh config/server.properties & 2. 创建一个新topic bin/kafka- ...

  7. android --- api json数据

    「一个」.「Time 时光」.「开眼」.「一席」.「梨视频」.「微软必应词典」.「金山词典」.「豆瓣电影」.「中央天气」.「魅族天气」.「每日一文」.「12306」.「途牛」.「快递100」.「快递」 ...

  8. vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值

    首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...

  9. 【ybt1252】走迷宫

    (还是蛮经典的一道bfs) 显然算法bfs [传送门] 算法基本上算是bfs的模板了,(模板详见[新知识]队列&bfs[洛谷p1996约瑟夫问题&洛谷p1451求细胞数量]) #inc ...

  10. C语言缓冲区

    定义 缓冲区是内存空间的一部分,用于缓冲输入或输出的数据.根据其对应的是输入设备还是输出设备,分为输入缓冲区和输出缓冲区. 类型 缓冲区分为三种类型:全缓冲.行缓冲和不带缓冲. 1.全缓冲 在这种情况 ...