AJAX-简单示例
2017-08-02 20:25
127 查看
一个简单的AJAX示例
页面很简单,只有一个button,添加了一个onclick事件,有三个函数,分别是
getXMLHttpRequest():针对不同浏览器,获取XMLHttpRequest实例
responseAjax():回调函数,当浏览器请求完成后执行,返回服务器返回的数据,responseText
callAjax():发送服务器请求,open()和send()方法
假设服务器用如下的一个简单PHP文件:
如果XMLHttpRequest成功调用了这个文件,responseText属性就会发哦韩字符串”Hello Ajax caller”,如下图
注意:要访问的必须是同域下文件,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。
什么事跨域访问:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。
跨域访问可用CORS,以后更新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX</title> <script> function getXMLHttpRequest() { try { try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ return new ActiveXObject("Msxml2.XMLHTTP"); } } catch(e) { return new XMLHttpRequest(); } } function responseAjax(){ if(myRequest.readyState ==4){ if(myRequest.status == 200){ alert("The server said:"+myRequest.responseText); }else{ alert("error:"+myRequest.statusText); } } } var myRequest = getXMLHttpRequest(); function callAjax(){ var lastname = 'Numb'; var url="http://123.206.17.200/hello.php"; myRequest.open('GET',url) myRequest.onreadystatechange = responseAjax; myRequest.send() } </script> </head> <body> <button id="btn" onclick="callAjax()">按钮</button> </body> </html>
页面很简单,只有一个button,添加了一个onclick事件,有三个函数,分别是
getXMLHttpRequest():针对不同浏览器,获取XMLHttpRequest实例
responseAjax():回调函数,当浏览器请求完成后执行,返回服务器返回的数据,responseText
callAjax():发送服务器请求,open()和send()方法
假设服务器用如下的一个简单PHP文件:
<?php echo "Hello Ajax caller";?>
如果XMLHttpRequest成功调用了这个文件,responseText属性就会发哦韩字符串”Hello Ajax caller”,如下图
注意:要访问的必须是同域下文件,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。
什么事跨域访问:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。
跨域访问可用CORS,以后更新
相关文章推荐
- Ajax / jQuery.getJSON简单示例
- jquery+ajax+php简单示例
- xmlHTTP xmlDOC 与 C#中DataSet的结合 实现AJAX简单示例
- SpringMVC(26):简单的json数据校验示例(实现功能:使用jQuery框架的ajax()方法来实现 userCode的校验)
- ajax 小例子 示例 简单应用 如何使用
- PHP实现简单ajax Loading加载功能示例
- JavaScript 原生ajax的简单示例
- jQuery基于ajax操作json数据简单示例
- Ajax简单示例之改变下拉框动态生成表格
- 简单示例AJAX结合PHP代码实现登录效果代码
- AJAX最简单示例
- xmlHTTP xmlDOC 与 C#中DataSet的结合 实现AJAX简单示例
- 下拉列表联动总结(AJAX下拉列表联动简单示例)
- Jquery 调用asp.net ajax (web service/static page method)的示例(一)---简单参数
- jQuery简单的Ajax调用示例
- Ajax -- 原理及简单示例
- 一个简单的AJAX示例
- 简单示例AJAX结合PHP代码实现登录效果代码
- ExtJS与AjaxPro结合的简单示例
- xmlHTTP xmlDOC 与 C#中DataSet的结合 实现AJAX简单示例