ajax = asynchronous javascript and xml(异步的 javascript 和 xml)
点击按钮,访问服务器上的ajax_info.txt文件,获得txt文件的内容,并修改显示的文本
<!doctype html> <html> <head> <script> var xmlhttp;//xmlhttp对象 function loadxmldoc(url,cfunc){ //不同的浏览器,或得xmlhttp对象所调用的方法不同 if (window.xmlhttprequest){ // ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); }else{ // ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } //回调函数 xmlhttp.onreadystatechange=cfunc; xmlhttp.open("get",url,true); xmlhttp.send(); } function myfunction(){ //访问服务器上的/try/ajax/ajax_info.txt,并回调函数 loadxmldoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } }); } </script> </head> <body> <div id="mydiv"><h2>使用 ajax 修改文本内容</h2></div> <button type="button" onclick="myfunction()">修改内容</button> </body> </html>
ajax的核心对象,是服务器和客户端中间的桥梁,客户端向服务器发送请求和客户端获得服务器响应都是通过此对象的属性和方法来进行。
var xmlhttp; //window.xmlhttprequest不为空,就是true if (window.xmlhttprequest){ // ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); }else{// ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); }
method
:请求的类型;get 或 posturl
:文件在服务器上的位置async
:true(异步)或 false(同步),推荐使用异步xmlhttp对象有两个属性readystate
和status
当readystate
发生改变,就会触发onreadystatechange
事件
readystate
有以下几种状态
status
有两种状态
使用 xmlhttprequest 对象的 responsetext
或 responsexml
属性可以获得来自服务器的响应数据
responsetext
获得字符串形式的响应数据。responsexml
获得 xml 形式的响应数据。最基本的ajax方法
load(url,[data],[callback])
从服务器载入数据并且将返回的html代码并插入至匹配的元素中。
data
是传递给服务器的数据参数 ,可以是一个普通的对象或字符串
提供了一个回调函数complete(responsetext, textstatus, xmlhttprequest)
,当html代码并插入至匹配的元素中就会被调用
$('#mydiv').load("test.html"); //这里的first.html是当前同级目录的一个html文件 $('#mydiv').load('first.html',function (data,status) { console.log(data); console.log(status);//状态,成功为success,失败则为error });
使用一个http get请求从服务器加载数据
//这里实现的效果与上面的load一致 $.get("first.html",function(data){ $('#mydiv').html("test.html"); });
使用一个http post请求从服务器加载数据,与上面get类似
获得json数据并自动解析自动解析
$.getjson("test.js", function(json){ console.log(json.users[3].name); });
使用一个http get请求从服务器加载并执行一个 javascript 文件
如对本文有疑问, 点击进行留言回复!!
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法(不用jQuery)
网友评论