原生Aajax 和jQuery Ajax 写法个人总结


Posted in jQuery onMarch 24, 2017

AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

一个完整的HTTP请求:由请求方式、URL、请求头和请求体组成;

一个完整的HTTP响应:由状态码、响应头、响应体组成;

http状态码:1开头 代表信息类 正在处理、2开头代表请求成功200 OK、3开头代表重定向、4开头代表客户端错误 404、5开头代表服务器错误;

响应状态:0,1,2,3,4  4代表响应成功。

open方法中的第三个参数代表是否异步(TRUE为异步   FALSE为同步)。

当请求方式为POST时,open方法后面要设置请求头(xmlhttp.setResponseHeader(""))send方法中要加入;

原生JavaScript写法:

var xhr;
  function rukou()//入口函数
  {
   xhr=getxhr();
   if(xhr==null)
   {
    alert("浏览器不支持!");
   }
   var url="";
   xhr.onreadystatechange=fanhui;
   xhr.open("GET",url,true);
   xhr.send(null);
  }
  function fanhui()//请求成功的回调函数
  {
   if(readyState==4)
   {
    document.getElementById("xx").innerHTML=xhr.responseText;
   }
  }
  function getxhr()//获取xmlhttp对象
  {
   xhr=null;
   try{
    xhr=new XMLHttpRequest();
   }
   catch(e)
   {
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
  }

jQuery中的ajax写法:

$("#tijiao").click(function(){
  $.ajax({
   type:"GET",
   url:"http://localhost/AJAX/test.php?name="+$("#name").val()+"&phone="+$("#phone").val(),
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("错误!!!");
   }
  })
 })
$("#tijiao").click(function(){
  $.ajax({
   type:"POST",
   url:"test.php",
   data:{
    name:$("#name").val(),
    phone:$("#phone").val()
   },
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("错误!!!");
   }
  })
 })

 以上所述是小编给大家介绍的原生Aajax 和jQuery Ajax 个人总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python简单操作excle的方法
2018/09/12 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
结束运行python的方法
2020/06/16 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
小学生新学期寄语
2014/01/19 职场文书
工程招投标邀请书
2014/01/26 职场文书
兴趣小组活动总结
2014/05/05 职场文书
党委领导班子整改方案
2014/09/30 职场文书
小学推普周活动总结
2015/05/07 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis