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. cakePHP的ajax弹出窗

    在html里添加一个触发弹出框的按钮 $("#button1").on("click", function() { $("#dialogue" ...

  2. RECON-NG

    web搜索框架,python开发,与msf命令形式相似. 创建独立的工作区 recon-ng -w sina 可以看到就转到了新建的工作区sina里 为搜索框架指定API key keys add A ...

  3. love is ... ...

    16 years old, love is dream.20 years old, love is sex.30 years old, love is marriage. 40 years old, ...

  4. wordpress smtp发送邮件

    准备工作   进入qq邮箱 点击设置 邮箱设置 账户选项 下拉 找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务  开启 点击开启后发送短信内容 配置邮件客户端 到 ...

  5. 把图片上的文字转换成word文字?

    转换后的文字不是很如意,但是免费方便. 1.打开Office办公软件自带的OneNote工具.随便新建一个笔记页面,以方便我们接下来的操作. 2.插入图片.在菜单栏里点击[插入],选择插入[图片],找 ...

  6. js获取当前网页header头部信息

    思路,通过ajax重新请求当前页面,用getAllResponseHeaders方法获取: var req = new XMLHttpRequest();req.open('GET', documen ...

  7. 数据存储 共享参数 SharedPreferences

    先要声明文件名和操作方式,第一个参数:文件名为"share.xml",第二个参数:私有模式SharedPreferences shared = getSharedPreferenc ...

  8. c# 文件过大时清空原有内容重新写入

    FileStream fs = new FileStream("E:\\Test\\HistoryData.txt", FileMode.Append, FileAccess.Wr ...

  9. Netty实践一(数据通信)

    我们需要了解下在真正项目应用中如何去考虑Netty的使用,大体上对于一些参数设置都是根据服务器性能决定的.这个不是最主要的. 我们需要考虑的问题是两台机器(甚至多台)使用Netty的怎样进行通信,大体 ...

  10. f5 SSL及证书

    1.SSL卸载 1)在BIG-IP上终结SSL连接BIG-IP可以全面了解应用,可以使用iRules, Profiles等,可以释放server的资源 2)包含:统一管理证书与密钥:支持基于硬件的关键 ...