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的更多相关文章

  1. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  2. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  3. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  4. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  5. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  6. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  7. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  8. [javascript]原生js实现Ajax

    一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...

  9. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

随机推荐

  1. FZU 2092 收集水晶(记忆化搜索)

    Problem 2092 收集水晶 Accept: 101 Submit: 439 Time Limit: 5000 mSec Memory Limit : 32768 KB Problem Desc ...

  2. libmv

    What is libmv? libmv, also known as the Library for Multiview Reconstruction (or LMV), is the comput ...

  3. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  4. The third column indicates whether subclasses of the class declared outside this package have access to the member.;

    总结1.modifier 改性剂 修饰符 修饰语 调节器access modifier 访问修饰符 存取权限 存取修饰词 存取修饰字官网“can”Access level modifiers dete ...

  5. 对SQL SERVER数据类型理解最好的一篇文章

    字符串前加N SQL SERVER中生成的语句中,字符串前加N,N 前缀必须是大写字母,是Unicode编码的意思. 一般来说,英文字符是一个字节组成,但是国际上的字太多了,因此就用两个字节来表示字符 ...

  6. IO流(9)复制指定文件夹下指定文件到目的文件夹,并改名

    import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import ja ...

  7. (3.2)mysql基础深入——mysql源码阅读工具安装与应用

    (3.2)mysql基础深入——mysql源码阅读工具安装与应用 关键字:mysql源码阅读工具 工具列举:一般多用[1][2][3]吧 [1]source insight [2]写字板/记事本 UE ...

  8. js-jquery-Validate校验【二】中文api

    jQuery.validate 中文 API 名称 返回类型 描述 validate(options) Validator 验证所选的 FORM. valid() Boolean 检查是否验证通过. ...

  9. SVN出现xcrun: error: invalid active developer path(Mac)

    Mac升级了系统,配置PHPStorm的SVN,出现如下错误: 具体提示的内容是:xcrun: error: invalid active developer path (/Library/Devel ...

  10. Mac下PHP7.1+Nginx安装和配置

    https://blog.csdn.net/haiyanggeng/article/details/79186982 PHP:7.1.13Nginx:1.12.2 1. 安装PHP# 添加源brew ...