1、创建异步对象  一般命名为xhr

    var xhr = new XMLHttpRequest();
 
2、 设置请求行 open(请求方式,请求url)
 
  1.get 需要在url后面拼接参数(如果有参数)
  2.post请求不需要拼接参数
  xhr.open("post","validate.php");
 
3、设置请求头:setRequestHeader()
 
  1.get不需要设置
  2.post需要设置请求头:Content-Type:application/x-www-form-urlencoded
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");.
   如果没有设置,参数无法正确的传递到服务器(本质上说,如果没有参数,也不一定需要设置,不会影响请求的发送)
4、 设置请求体 send()
 
  1.get的参数在url拼接了,所以不需要在这个函数中设置
  2.post的参数在这个函数中设置(如果有参数)
  xhr.send("username="+name);
5、让异步对象接收服务器的响应数据
 
   一个成功的响应有两个条件:1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)
   当异步对象的响应状态发生改变的时候,会触发一个事件:onreadystatechange
   xhr.onreadystatechange = function(){
   判断服务器是否响应 判断异步对象的响应状态
   if(xhr.status == 200 && xhr.readyState == 4){
   //当返回的是xml格式的数据时: console.log(responseXML)
   //当返回的是其他格式的数据时:console.log(responseText)
   }
 
 
服务器响应状态码:
  200: 访问的数据已经获取到了
  404: 服务器端访问不到客户端请求的数据
  500:服务器出错了
  302: 重定向
 
 

发送ajax步骤的更多相关文章

  1. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  2. 学习AJAX必知必会(4)~JQuery发送Ajax请求

    一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...

  3. 在发送ajax请求时加时间戳或者随机数去除js缓存

    在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...

  4. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  5. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  6. js中使用队列发送ajax请求

    最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...

  7. IE6下a标签上发送ajax请求总是error

    IE6下真是处处是坑啊!!!走过了一个又一个坑,记录一下吧. 之前不知道a标签上注册click事件之后,发送ajax请求总是error.后来经过几番网上搜索,终于找到高人遇到此坑的解决办法.原来是a标 ...

  8. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  9. 【liferay】1、使用alloy-UI发送ajax请求

    1.首先liferay要发送ajax请求,那么就需要在jsp中定义resourceURL <portlet:resourceURL var="workDeal" id=&qu ...

随机推荐

  1. Linux集群架构(一)

    第二十八课 Linux集群架构(一) 目录 一. 集群介绍 二. keepalived介绍 三. 用keepalived配置高可用集群 四. 负载均衡集群介绍 五. LVS介绍 六. LVS调度算法 ...

  2. Hacker一月间

    我给自己的新赛季制定了一个计划,就是研究Kali,一个大集成开源软件系统,不过是用来做Hacker的. 以前其实想玩玩这个,但负责信息安全,总是担心安全漏洞这里安全漏洞哪儿,其实自己很害怕有安全漏洞, ...

  3. vue-resource 和 axios的区别

    vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的 ...

  4. Shiro-ini认证

    #2019.2.2 shiro的ini认证 先用IDEA创建一个普通的MAVEN项目,并导入依赖 <!--Junit单元测试--> <groupId>junit</gro ...

  5. selenium中的alter弹框

    from selenium import webdriverimport timedriver=webdriver.Chrome()driver.get('http://ui.imdsx.cn/uit ...

  6. 2.Servlet 请求、响应及重定向

    PS:以下仅为个人学习笔记,涩及方面略窄  #######################     Request     ####################### /** *    reque ...

  7. Linux:Gentoo系统的安装笔记(三)

    这期笔记将是gentoo安装的最后一期了,虽然已经配置内核了,但是也要完成剩下的安装步骤,这离安装完成已经不远了,继续加油!!! 如果中断了安装,请看第二期的笔记进行恢复安装,但请重新编译一次内核,否 ...

  8. 精进之路之HashMap

    HashMap本质的核心就是“数组+链表”,数组对于访问速度很快,而链表的优势在于插入速度快,HashMap集二者于一身. 提到HashMap,我们不得不提各个版本对于HashMap的不同.本文中先从 ...

  9. 马凯军201771010116《面向对象与程序设计Java》第十七周学习总结

    一.理论知识部分 Java 的线程调度采用优先级策略:优先级高的先执行,优先级低的后执行:多线程系统会自动为每个线程分配一个优先级,缺省时,继承其父类的优先级: 任务紧急的线程,其优先级较高: 同优先 ...

  10. cmake jni简说

    CMake配置Jni开发 1 安装工具 2 新建项目,注意include C++ support选项 项目创建好后查看目录结构 新增三块.externalNativeBuild:cpp(c.c++代码 ...