AJAX初步认识
简介1.ajax介绍ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 ajax不是新的编程语言，而是一种使用现有标准的新方法。 ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 2.工作原理异步时ajax技术的核心，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 整个Ajax应用的工作过程如下：
3.XMLHttpRequest整个Ajax技术的灵魂。Ajax技术的核心就是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。 3.1XMLHttpRequest属性和方法属性：
方法： 3.2XMLHttpRequest简单实例get请求： <body>
<label for="username">姓名:</label><input type="text" id="username"/><br/>
<label for="age">年龄:</label><input type="text" id="age"/><br/>
<input type="button" value="GET" id="btn" onclick="btn_click();"/>
<div id="result"></div>
</body>
<script type="text/javascript"> function btn_click() { //创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); //获取值 var username = document.getElementById("username").value; var age = document.getElementById("age").value; //配置XMLHttpRequest对象. open(method,async) xmlHttp.open("get",'a.php?username='+username+"&age="+age,true); //设置回调函数. onreadystatechange:该属性用来指定xmlHttp对象状态改变时的事件函数 xmlHttp.onreadystatechange = function () { // 4:对象读取服务器相应结束。200:服务器响应正常。 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //responseText:该属性用于获取服务器的响应文本。 document.getElementById("result").innerHTML = xmlHttp.responseText; } } //发送请求 xmlHttp.send(null); } </script>
a.php代码： <?php header('content-type:text/html;charset=utf-8'); $username = $_GET['username']; $age = $_GET['age']; echo "你的名字是$username,年龄是$age " ; ?>
运行结果： post请求： xmlHttp.open("post",'b.php',true);
xmlHttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
xmlHttp.send('username='+username+'&age='+age);
b.php代码： <?php
$username = $_POST['username'];
$age = $_POST['age'];
echo "你的名字是$username,年龄是$age " ;
?>
运行结果跟上面一样，只是方式不一样。 4.通过JSONP实现AJAX跨域请求4.1 简介：JSON：javascript Object Notation 是一种轻量级的数据交换格式。 4.2 如何实现跨域通过script标记 4.3 代码1.js实现： <script> //回调的result : Object {id: 1,username: "zyzhang",email: "zhangtaihu101@163.com"} function jsonpCallback(result) { alert('用户名：'+result.username+'n'+'邮箱：'+result.email); } //动态创建一个script标签 var script = document.createElement('script'); //跨域请求的地址 script.src='1-jsonp.php?callback=jsonpCallback'; //加入到head中 document.getElementsByTagName('head')[0].appendChild(script); </script>
PHP代码： <?php
$callback=$_GET['callback'];
$userInfo=array('id'=>1,'username'=>'zyzhang','email'=>'zhangtaihu101@163.com');
$result=json_encode($userInfo);
echo $callback."({$result})";
?>
2.ajax实现
<body>
<button id="btn1">ajax请求</button>
<script> $(function () { $('#btn1').on('click',function () { $.ajax({ url: '2-jsonp.php',type: 'GET',dataType:'json',success: function (data) { console.log(data); alert('用户名：' + data.username + 'n' + '邮箱：' + data.email); },error: function () { alert('error') } }); }); }); </script>
</body>
PHP代码： <?php
//必须 不然报错
header('Access-Control-Allow-Origin:*');
$userInfo=array('id'=>1,'email'=>'zhangtaihu101@163.com');
echo json_encode($userInfo);
?>
3.JSONP实现： <button id="btn1">jsonp实现</button>
<button id="btn2">getJSON实现</button>
<script> $(function () { $('#btn1').on('click',function () { $.ajax({ url: '1-jsonp.php',dataType: 'JSONP',jsonp: 'callback',success: function (data) { alert('用户名：' + data.username + 'n' + '邮箱：' + data.email); } }); }); $('#btn2').on('click',function () { $.getJSON('1-jsonp.php?callback=?',function (data) { alert('用户名：' + data.username + 'n' + '邮箱：' + data.email); }); }); }); </script>
运行结果如图： 暂时这么多，后面会继续分享 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |