原生写法:

$('#send').click(function(){
//请求的5个阶段,对应readyState的值
//0: 未初始化,send方法未调用;
//1: 正在发送请求,send方法已调用;
//2: 请求发送完毕,send方法执行完毕;
//3: 正在解析响应内容;
//4: 响应内容解析完毕; var data = 'name=yang';
var xhr = new XMLHttpRequest(); //创建一个ajax对象
xhr.onreadystatechange = function(event){ //对ajax对象进行监听
if(xhr.readyState == 4){ //4表示解析完毕
if(xhr.status == 200){ //200为正常返回
console.log(xhr)
}
}
};
xhr.open('POST','url',true); //建立连接,参数一:发送方式,二:请求地址,三:是否异步,true为异步
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=utf-8'); //POST貌似可有可无,get不加可能会出现问题
xhr.send(data); //发送
});

jquery写法:

$.ajax({
url:'/test.do',
type:'POST', //GET
async:true, //或false,是否异步
data:{
"name":"name1","address":"朝阳","age":18
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
    $.ajax({
url: "test.do",
type: "POST",
async: true,//默认true:异步
contentType:"application/x-www-form-urlencoded;charset=UTF-8",//发送信息至服务器时内容编码类型
data: {"postMsg":postMsg},
dataType: "json",//返回的数据格式
timeout:5000,//超时时间
cache: false,
success: function(data,status){ },
error: function(xmlHttpRequest,errorInfo,errorObject){
alert(xmlHttpRequest.status);
alert(errorInfo);
}
});

原生Ajax和jqueryAjax写法的更多相关文章

  1. 关于原生AJAX和jQueryAJAX的编程

    1.回顾传统Ajax开发步骤 ①:创建xmlHttpRequest对象 var xmlHttp = creatHttpRequest(); ②:绑定回调函数 xmlHttp.onreadystatec ...

  2. ajax的jquery写法和原生写法

    一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指: ...

  3. ASP.NET学习笔记(5)——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  4. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  5. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  6. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  7. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  8. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  9. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

随机推荐

  1. PLSQL的SQL%NOTFOUND的使用场景

    SELECT * INTO v_ticketStorageRow FROM BDM_TICKET_STORAGE WHERE p_startTicketNo >= START_NO_ AND p ...

  2. MySQL数据类型--与MySQL零距离接触2-11MySQL自动编号

    MySQL自动编号,确保数据的唯一性

  3. 1021 Deepest Root

    这道题的关键在于如何求两个最远的结点,二叉树比较容易一直DFS就能找到,但是普通树就比较麻烦.要先找到一端,再去找另外一端,两端的并集就是答案.因为结点都是对称的,所以两端都是答案.还要注意去重,12 ...

  4. Boost学习-Linuxidc上的很好的学习资料

    来自 http://www.linuxidc.com/Linux/2011-07/39215.htm,拷贝第一页如下 Boost学习系列 简介及基本用法 [日期:2011-07-25] 来源:Linu ...

  5. xcode 各版本下载地址及其它工具下载地址

    官方下载地址:https://developer.apple.com/downloads/

  6. element-ui的滚动条组件el-scrollbar(官方没有)

    <template> <div style="height:600px;"> <el-scrollbar style="height:100 ...

  7. Unable to update the EntitySet 'T_JsAPI' because it has a DefiningQuery and no <InsertFunction> element exists in the <ModificationFunctionMapping> element to support the current operation.

    前几天使用EF6的Db First模式改造了支付中心的数据访问层,废弃了ado.net. 同时,使用T4把实体类生成到了model层的PO目录下. 今天在db里新建了一张表,在edmx文件里更新模型( ...

  8. java微信小程序调用支付接口

    简介:微信小程序支付这里的坑还是有的,所以提醒各位在编写的一定要注意!!! 1.首先呢,你需要准备openid,appid,还有申请微信支付后要设置一个32位的密钥,需要先生成一个sign,得到pre ...

  9. Struts上传文件

    Struts上传文件分为两个步骤: 1). 首先将客户端上传的文件保存到Struts.multipart.saveDir键所指定的目录中,如果该键所对应的目录不存在,那么就保存到javax.servl ...

  10. [13]Windows 内核情景分析 --- 网络通信

    典型的基于tcpip协议套接字方式的网络通信模块层次: 应用程序 socket api WS2_32.dll socket irp Afd.sys tdi irp Tcpip.sys 回调函数接口 各 ...