原生JS操作AJAX
1,get方式的AJAX
function sendAjaxReq()
{
//1,创建ajax引擎 XMLHttpRequest对象
var req = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
//2,打开一个请求,此时未发送请求,定义好发送请求的方式以及是否需要携带数据 是否同步异步
req.open("get", "testAjax?phone=iphone&apple=pen");
//3,准备好处理服务器返回的数据
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
//返回json数据的解析格式
var str = req.responseText;
eval("var obj=" + str);
alert(obj.name);
//返回xml的解析格式
var data = req.reponseXML.getElementsByTagName("bigName")[0].first(child.data);
}
}
//4,发送请求,如果是在火狐下,使用get方式发送ajax请求,send的时候括号写上null
req.send(null);
}
2,post方式AJAX
//使用post传参,需要携带一个请求头模拟表单提交
function sendAjax()
{
var request = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
request.open("post", "testAjax?phone=1", true)
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200)
{
var str = request.responseText;
alert(str);
}
else if(request.status == 404)
{
alert("找不到资源");
}
}
}
request.setRequestHeader("content-type", "application/x-www-form-urlencoded")
request.send("phone=");
}
3,封装了get和post的AJAX
function sendAjaxReq(method,url,param,fun200,fun404,fun500)
{
var req;
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
req.open(method,url);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
if(fun200)
{
fun200(req.responseText);
}
}
else if(req.status == 404)
{
if(fun404)
{
fun404();
}
}
else if(req.status == 500)
{
if(fun500)
{
fun500();
}
}
}
}
if(method.toUpperCase() == "GET")
{
req.send(null);
}
else if(method.toUpperCase() == "POST")
{
req.setRequestHeader("context-type", "application/x-www-form-urlencoded");
req.send(param);
}
} function testAjax()
{
sendAjaxReq("get","ajaxServlet?uname=1&password=2",null,function(data)
{
eval("var obj="+data);
alert(obj.data);
});
}
原生JS操作AJAX的更多相关文章
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- [javascript]原生js实现Ajax
一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
随机推荐
- 使用Homebrew在Mac OS X EI Capitan上安装与配置nginx和PHP
安装nginx brew install nginx sudo nginx 测试安装 在浏览器打开下面的链接地址 http://localhost:8080 nginx.conf配置 # HTTPS ...
- CGI servlet Applet Scriptlet Scriptlet JSP data layer(数据层),business layer(业务层), presentation layer(表现层)
https://en.wikipedia.org/wiki/Common_Gateway_Interface In computing, Common Gateway Interface (CGI) ...
- linux Service start
1. crontab的方式 2. 服务的方式.该服务能够持续监测minerd是否在运行,如果没有在运行就会运行minerd:服务也可以做成开机自启动.该服务执行的内容如下,该服务是判断目标服务器的pa ...
- AOP 详解
1. 需求:统计方法执行的性能情况(来源:<精通Spring 4.x>) // 性能监视类 PerformanceMonitor package com.noodles.proxy; pu ...
- 懂点PS技巧,你会减少很多痛苦
UI设计 不像平面设计那样随性, 期间可以用点技巧来减少痛苦. 1. 设置网格线 保持像素完美 不在1:1分辨率下也能保持像素完美,可以通过创建网格线来避免虚边的出现. 编辑 > 首选项 > ...
- 洛谷P3806 点分治1 & POJ1741 Tree & CF161D Distance in Tree
正解:点分治 解题报告: 传送门1! 传送门2! 传送门3! 点分治板子有点多,,,分开写题解的话就显得很空旷,不写又不太好毕竟初学还是要多写下题解便于理解 于是灵巧发挥压行选手习惯,开始压题解(bu ...
- 启动spark
cd /app/sparkuser/spark-120/sbin ./start-all.sh #./stop-all.sh #停止服务 -------------------
- MySQL如何开启慢查询
一 简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二 参数说明 slow_query_log 慢查询开启状态 slo ...
- 奇特的Local System权限(转载)
转载自:http://mp.weixin.qq.com/s?__biz=MzA3NTM1MzE4Nw==&mid=202597764&idx=1&sn=0cef1a40fb3c ...
- you
抑制幽门螺旋杆菌: 1.西兰花 鲜嫩的西兰花蔬菜,含有一种物质叫异硫氰酸酯,这种物质就是幽门螺杆菌的 " 天敌 ",可达到百分百抑制的作用,甚至还有医生给了它一个最强天然抗生素的称 ...