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. 使用SpirngMvc拦截器实现对登陆用户的身份验证

    登陆成功则按returnUrl进行跳转,即跳转到登陆之前的页面,否则跳转到登陆页面,返回登陆错误信息. 1.SpringMVC.xml <!-- 映射器 --> <bean clas ...

  2. ansible1

    前期工作: 第一步:下载epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 第二步: ...

  3. MySQL基本SQL语句之数据插入、删除数据和更新数据

    一.INSERT插入数据: 方法一:批量插入 基本语法: INSERT INTO tb_name (col1, col2, ...) VALUES (val1, val2, ...)[,(val1, ...

  4. 22 【python】入门指南:函数

    #!/bin/python def test_func(): return "test_func" a = test_func() print(a) 输出结果: test_func ...

  5. shelve

    shelve是对pickle的封装 json & pickle是把所有的数据全部封装,一次性写入文件,而shelve可以把数据分类,以键值对的形式分别写入文件 shelve模块是一个简单的k, ...

  6. android项目安装报错:INSTALL_FAILED_CONFLICTING_PROVIDER

    这主要是由于调试的环境中已有一个同名的Provider存在. 解决方法是修改AndroidManifest.xml中的 <provider android:name="applockP ...

  7. 42-字符串到json 的错误 com.alibaba.fastjson.JSONObject cannot be cast to java.lang.String

    json: {"updated_at":1551780617,"attr":{"uptime_h":3,"uptime_m&quo ...

  8. ADT和DS

    Abstract Data Type vs. Data Structrue 抽象数据类型=数据模型+定义在该模型上的一组操作.  interface 数据结构=基于某种特定语言,实现ADT的一整套算法 ...

  9. 浅谈XListView的使用

    XListView是github上的开源第三方控件 内部封装好的一个类XListView 其内部包含XListViewFooter XListViewHeader 两个自定义类(控件)如此实现上拉加载 ...

  10. YII2中添加自定义模块

    有些时候系统功能过于复杂,这时我们需要通过模块把一些功能区分开来,便于管理与维护. 我用的是Yii2的基本应用程序模板,程序其实已经给我们提供了一个模块,就是app本身.YII2中是可以无限嵌套模块的 ...