PHP和ajax详解

优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等
进一步促进页面和数据的分离
缺点：AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
AJAX只是局部刷新,所以页面的后退按钮是没有用的.
对流媒体还有移动设备的支持不是太好等

实例化ajax
  //实例化对象
var xmlhttp=null;
if(window.XMLHttpRequest)
{xmlhttp=new XMLHttpRequest();
}else{xmlhttp=ActiveXObject("Mircrosoft.XMLHTTP");    //浏览器是否支持 XMLHttpRequest 对象
}

//向服务器发送请求

xmlhttp.open("请求的类型get或post","文件在的服务器上位置","true异步或false同步");xmlhttp.send();//将请求发送到 服务器上

setRequestHeader("头名称","规定头的值");

//服务器响应responseText(); //获取字符串形式的响应数序responseXML(); //获取XML形式的响应数据

onreadystatechange事件//当请求发送到服务器的时候，我们需要执行

XMLHttpRequest的三个重要属性onreadystatechange 存储函数，每当readyState属性改变时，就会调用该函数readystate  XMLHttpRequest的状态0为请求未初始化1服务器连接已建立2 请求已接收3 请求处理中4 请求已完成,且响应已就绪

status 200 “OK”  404 未找到页面

xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body><form  entype="multipart/form-data" name="aax"><table border="0" width="300"><tr><td>名称</td><td><input type="text" name=name /></td></tr><tr><td>类型</td><td><select name="s"><option value="1">服装</option><option value="2">视频</option><option value="3">汽车</option></select></td></tr><tr><td align="right">单价：</td><td><input type="text" name="price"/></td></tr><tr><td align="right">库存：</td><td><input type="text" name="total"/></td></tr><tr><td align="right">图片：</td><td><input type="file" name="pic"/></td></tr><tr><td align="right" valign="top">描述：</td><td><textarea rows="5" cols="20" name="note"></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" οnclick="ajax();"  value="添加"/>   <input type="reset" value="重置"/></td></tr></table></form><script>

function ajax()
{
var f=document.aax;
var name=f.name.value;
var typeid=f.s.value;
var pic=f.pic.value;
var price=f.price.value;
var note=f.note.value;

var xmlhttp=null;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else{

xmlhttp=ActiveXObject("Microsoft.XMLHTTP");
}
var lian="name="+name+"&typeid="+typeid+"&pic="+pic+"&price="+price+"&note="+note;
$xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.open("get","addcas.php",true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{

document.getElementById("sed").innerHTML=$xmlhttp.responeseText;
}
};

}

    </script>
</body>
</html>

转载于:https://www.cnblogs.com/mengluo/p/5524742.html

PHP和ajax详解相关推荐

Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
Asp.Net+Jquery.Ajax详解5-$.getScript
目录(已经更新的文章会有连接,从7月25日开始,每2到3天更新一篇): Asp.Net+Jquery.Ajax详解1-开篇(2012.07.25发) Asp.Net+Jquery.Ajax详解2-$. ...
什么是ajax？ajax详解
今天来聊一聊前后端交互的重要工具AJAX 查看全文 http://www.taodudu.cc/news/show-5108704.html 相关文章: AJAX(详解) <PYTHON3网络爬 ...
看这一篇就够了！-Ajax详解
今天来聊一聊前后端交互的重要工具AJAX 结合上次跟大家分享的前后端交互基础,如果还没有看过的童鞋,以下是传送门 [前后端交互详解] 1. AJAX - 到底什么是Ajax? ajax 全名 asyn ...
jQuery Ajax详解
jQuery Ajax 全解析本文地址: jQuery Ajax 全解析本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并 ...
浏览器与服务器通信技术——Ajax详解
使用BOM接口从服务器获取数据,获取的是整个页面,得到数据之后需要刷新整个页面.运用ajax技术无须刷新页面即可从服务器取得数据.ajax的核心是XMLHttpRequest对象. 一. 创建XHR对 ...
[ JS 进阶 ] Ajax 详解 (2) ：XHR 实例 GET 和 POST 异步和同步
上一篇文章我们大概知道了XHR对象是什么东东,也都了解了它的一些属性和方法,那么现在具体来实现一下Ajax技术和了解下XHR2对象. 1.实现Ajax 先来创建个XHR对象的实例: var xh ...
Ajax详解第六篇（jQuery实现Ajax）
文章目录 AJAX 1.$.ajax() 核心函数 1.1语法 2 $.get() 2.1语法 2.2例子 3 $.post() 3.1语法 4.实战(对比) AJAX 使用jQuery提供的函数 ...
Ajax 详解网页从输入url到渲染的流程同步异步你想要的全都有
1 前后端交互流程 1.1 了解服务器提供某种服务器的机器(计算机) 1.2 了解前端访问服务器的几种方式直接在地址栏输入网址网页 ...

PHP和ajax详解

PHP和ajax详解相关推荐

最新文章

热门文章