1、首先创建一个js文件夹名为common.js、创建一个createXhr()的函数、在此方法中创建异步对象XMLHttpRequest,后面使用的时候直接引入common.js文件,然后进行调用就行了。

function createXhr(){
var xhr=null;
if(window.XMLHttpRequest){//判断浏览器是否支持标准创建
xhr=new XMLHttpRequest();//如果支持返回一个xhr对象
}else{
//如果不支持标准创建,返回一个ie8以下的异步对象
xhr=new ActiveXObject('Microsoft.XMLHttp')
}
return xhr;
}

2、绑定监听事件

xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.Status==200){
var result=xhr.responseText;
}
}

3、创建请求,打开链接

xhr.open(get,url,true);//设置请求方式和请求路径
//post方式要设置请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")

4、发送请求

xhr.send(body);
createXhr

Ajax原生四大步骤的更多相关文章

  1. javascript中ajax的四大步骤

    原生js中ajax写法一: function ajaxys(){ //1. 创建xhr对象 var xhr = new XMLHttpRequest();//XMLHttpRequest() // 2 ...

  2. Ajax 基本使用的四大步骤,简单易懂

    ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的朋友看下吧 什么是ajax? ajax(异步 ...

  3. Ajax原生写法

    用太久JQuery了,别忘了Ajax原生是怎么写的 var Ajax = { get : function (url, callback) { var req = Ajax.getRequest(ca ...

  4. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  5. Ajax原生请求和java对象转成json

    \黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模 ...

  6. 实现AJAX的基本步骤

    实现AJAX的基本步骤 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指 ...

  7. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  9. 实现AJAX的基本步骤 。。转

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法. ...

随机推荐

  1. Errors running builder 'Faceted Project Validation Builder' on project

    右键eclipse中的工程,选择properties,选择build,去掉出问题的validation校验项,重启eclipse即可.

  2. python全栈 流程控制;while 循环 格式化输出 运算符 及编码

    python全栈开发 1循环 2break和continue的区别 3格式化输出 4运算符 5编码 一.流程控制while循环 while条件: 代码块(循环体) 1.死循环; while True; ...

  3. spring 中 PO与DTO相互转换的工具类

    public class BeanMapper { /** * 持有Dozer单例, 避免重复创建DozerMapper消耗资源. */ private static DozerBeanMapper ...

  4. 手机通过Charles抓取https包

      因为fiddler不能在mac上使用,而Charles是跨平台的,可以在mac上使用,所以需要了解一下Charles的使用   安装破解版Charles   下载破解版包,先启动一次未破解版的Ch ...

  5. angularjs $watch

    参考 https://blog.csdn.net/u010451286/article/details/50635839 scope.$watch("field1 + field2" ...

  6. 【Scrapy】关于使用Scrapy框架爬虫遇到的问题1

    class testScrapy(scrapy.Spider): name = "testLogs" allowed_domains=["cnblogs.com" ...

  7. 贪吃蛇Global Java实现(二)

    package cn.tcc.snake.util; public class Global {public static final int CELL_SIZE=20;public static f ...

  8. 【转】微信公众号h5网页被嵌入广告 不知道什么原因

    这个是因为http劫持导致的.HTTP劫持是在使用者与其目的网络服务所建立的专用数据通道中,监视特定数据信息,提示当满足设定的条件时,就会在正常的数据流中插入精心设计的网络数据报文,目的是让用户端程序 ...

  9. 通过docker-compose构建ghost博客(二)

    上一篇通过yml文件构建 ghost博客,这次通过构建nginx服务,并添加反向代理来运行搭建的ghost博客. 目录结构 ghost.conf 就是 定义的nginx 加载的配置文件 server ...

  10. rbac 权限分配, 基于formset实现,批量编辑

    已经完成了  批量添加的功能. 还想要一个批量修改的功能了.随之而来的第一个问题就是,  我们的formset 并不是一条记录.而是 多条记录,甚至整个表的记录.那么显而易见的问题就是,当前端页面把数 ...