原生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 dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 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
apache rewrite_module模块使用教程
2008/01/10 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
javascript正则表达式总结
2016/02/29 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
Django学习笔记之Class-Based-View
2017/02/15 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
酒店秘书求职信范文
2014/02/17 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
学习普通话的体会
2014/11/07 职场文书
英文商务邀请函范文
2015/01/31 职场文书
专职安全员岗位职责
2015/04/11 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers