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

//创建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;
}
//创建异步请求方法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
} 实例:模拟服务器发送请求

ajax提交数据(get方法):


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


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

  3)设置回调函数

  xhr.onreadystatechange = function(){

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

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

     }
  }


  4)发送请求


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


  });

 
//创建异步请求方法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 ,否则获取不到传递过去的

数据
})

});


												

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. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

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

  2. Maven多模块项目管理小结

    原文地址:http://blog.csdn.net/whuslei/article/details/7989102 题记 最近刚完成一个用Maven构建的Web项目,看了一些Maven方面的书,比如& ...

  3. openstack Q版部署-----环境搭建(1)

    浏览器建议全程使用火狐或者谷歌,不然VNC可能会有问题 一.环境准备 系统:centos7.2 x86_64 controller 2c+8g+40g 10.1.80.110 可以nat上网 comp ...

  4. pythonの信号量

    #!/usr/bin/env python import threading,time def run(n): # 申请锁 semaphore.acquire() time.sleep(1) prin ...

  5. valgrind--内存泄漏检测(转)

    Valgrind 概述 体系结构 Valgrind是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个框 ...

  6. Awk 命令学习总结、AWk命令系列学习(linux shell)

    AWK基本语法 下面没有提到awk命令怎么使用了,你可以通过 运行:awk –h 查询到所有命令及参数!下面把awk作为一门语言分节介绍. linux awk 内置变量使用介绍   awk语言中,怎么 ...

  7. Android开发该学习哪些东西?

    开篇: 本人也是众多Android开发道路上行走的一员,听了不少大神的知乎live,自己也看了不少书,也和不少前辈交流过,所以在这里分享一下Android开发应该学习的书籍以及知识,当然,也包括一些方 ...

  8. windows网络相关的命令

    一.netstat命令 显示协议统计信息和当前 TCP/IP 网络连接. NETSTAT [-a] [-b] [-e] [-f] [-n] [-o] [-p proto] [-r] [-s] [-x] ...

  9. The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 解决办法

    ♦  未在 Java构建路径中 找到父类 "javax.servlet.http.HttpServlet" ♦ 解决办法: 项目右击 → Build Path → 右侧 Add L ...

  10. 【转】vector中erase()的使用注意事项

    vector::erase():从指定容器删除指定位置的元素或某段范围内的元素 vector::erase()方法有两种重载形式 如下: iterator erase(   iterator _Whe ...