1)获取(创建)Ajax对象:获取XMLHttpRequest对象
2)创建请求:调用xhr的open方法
3)在发送请求之前需要设置回调函数:绑定指定xhr的onreadystatechange事件
4)调用send()方法发送请求

  1. //创建XMLHttpReuquest 对象
    function createXhr() {
    var xhr = null;
    //浏览器判断
    if (window.XMLHttpRequest) {
    //可以直接new出来对象的说明是IE7、8、9 Chrome、FireFox等浏览器
    xhr = new XMLHttpRequest();
    } else {
    //这样的就是IE 5.5、 IE 6等低版本的浏览器
    xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
    }
  1. //创建异步请求方法get
    function getServerText() {
    //获取xhr
    var xhr = createXhr();
    //创建请求
    xhr.open("get", "server.php", "true");//true表示异步请求
    //设置回调函数
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
    //服务器已经正确处理请求且正确响应数据到客户端
    var resText = xhr.responseText;//返回服务器响应文本
    //获取服务器响应给客户端的文本即server.php中的文本内容
    document.getElementById("showText").innerHTML = resText;
    }
    }
    //发送请求
    xhr.send(null);//请求方式为get,所以请求体必须是null
    }
  2.  
  3. 实例:模拟服务器发送请求

ajax提交数据(get方法):

  1.  

$(document),ready(function(){
   $("#txtName").blur(function(){
  1)获取xhr
  var xhr =createxhr();

  1.  

  2)创建请求
  var name = $("#txtName").val();
  var url = "checkname.jsp?name="+name;
  xhr.open("get",url,true);

  1.   3)设置回调函数
  2.  
  3.   xhr.onreadystatechange = function(){

  if(xhr.readyState==4 && xhr.status==200){
  //服务器已经正确处理请求且正确响应数据到客户端
   var resText= xhr.responseText;//返回服务器响应文 本

  $("#txtNameTip").html(resText);//获取响应回来的 数据

     }
  }

  1.  

  4)发送请求

  1.  

  xhr.send (null);//get发送请求的方法
    });

  1.  

  });

  1.  
  1. //创建异步请求方法post

$(document),ready(function(){
    $("#txtName").blur(function(){
  1)获取xhr
    var xhr =createxhr();

  2)创建请求
    var name = $("#txtName").val();
    var url = "checkname.jsp";
    xhr.open("post",url,true);
     xhr.setRequestHeader("Content-Type","application/x-www-
form-urlencoded");

3)设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){ //注意顺序
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文


$("#txtNameTip").html(resText);//获取响应回来的

数据
}
}

4)发送请求

xhr.send ("name="+name);//Post方法发送方法

注意:必须在创建请求之后,发送请求之前使用setRequestHeader

()显示更改Content-Type消息头的值为
application/x-www-form-urlencoded ,否则获取不到传递过去的

数据
})

});

  1.  
  1.  

ajax----发送异步请求的步骤的更多相关文章

  1. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. AJAX发送异步请求教程详解

    AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...

  3. JQ+AJAX 发送异步请求

    1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...

  4. ajax发送异步请求

    一:得到XMLHttpRequest对象 ajax其实只需要学习XMLHttpRequest一个对象 大多数浏览器都支持: var xmlHttp = new XMLHttprequest(); IE ...

  5. Ajax发送异步请求(四步操作)

    1.第一步(得到XMLHttpRequest) *ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!! *得到XMLHttpRequest >大多数浏 ...

  6. 使用AJAX技术发送异步请求,HTTP服务端推送

    使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...

  7. 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

    1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...

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

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

  9. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  10. 使用Ajax发送http请求(get&post请求)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...

随机推荐

  1. mysql 案例 ~ mysql字符集详解

    一 谈谈mysql常见的字符集问题 二 字符集统一  1 character_set_server  2 character_set_client  3 java/php等连接字符集  4 chara ...

  2. zabbix系列~mysql进行监控

    一 简介:zabbix进行数据库监控 二 目的:采用percona进行插件式安装监控 三 安装 环境 zabbix_agent 步骤  yum -y install php php-mysql yum ...

  3. 人人项目renren-security\git\renren-security的目录下的文件列表

    \.git\config; \.git\FETCH_HEAD; \.git\HEAD; \.git\index; \.git\logs\HEAD; \.git\logs\refs\heads\mast ...

  4. CF1100F Ivan and Burgers

    题目地址:CF1100F Ivan and Burgers 一道有难度的线性基题,看了题解才会做 预处理两个数组: \(p_{r,i}\) 表示满足下列条件的最大的 \(l\) :线性基第 \(i\) ...

  5. CF1091E New Year and the Acquaintance Estimation

    题目地址:CF1091E New Year and the Acquaintance Estimation 首先,易知 \(ans\) 的奇偶性与所有给出的数的和的奇偶性相同 其次,易证 \(ans\ ...

  6. Contains Duplicate I & III

    Contains Duplicate I Given an array of integers, find if the array contains any duplicates. Your fun ...

  7. Linker Scripts3--简单的链接脚本命令1

    1.前言 这个部分我们描述了简单的链接脚本命令 2.设置entry point 程序中第一条运行的指令被称为入口点entry point,可以使用ENTRY链接脚本命令设置entry point,参数 ...

  8. wxpy: 用 Python 玩微信【转】

    转自:https://wxpy.readthedocs.io/zh/latest/index.html 微信机器人 / 可能是最优雅的微信个人号 API wxpy 在 itchat 的基础上,通过大量 ...

  9. BIM 3D 数据交换格式 ----张建平(清华女)

    1.collada   EXPORTER 2.FBX    3D MAX 3.DAE 4.3D中的OBJ文件格式详解 (  http://www.cnblogs.com/slysky/p/408130 ...

  10. Going Home HDU - 1533 费用流

    http://acm.hdu.edu.cn/showproblem.php?pid=1533 给一个网格图,每两个点之间的匹配花费为其曼哈顿距离,问给每个的"$m$"匹配到一个&q ...