单看AJAX,他也没有多少个函数。先整理需要用到的函数和属性.
JS : XMLHttpRequest() 、open()、send()、setRequestHeader()、onreadystatechange、status、readyState、responseText
就是基本用到这几个函数和属性。主要记住的是XMLHttpRequest() ,剩下的有个印象看到知道啥意思就成,都不用去背,console.log()一下控制台里都有。
具体函数和属性作用看注释>实例
<script type="text/javascript"> var method = 'GET' var url = 'demo.php' //这里吧需要传输的数据进行一个拼接就可以记住拼接格式,拼成一个字符串 var data = 'username='+username+'&pwd='+pwd; ajax(method,url,data) function ajax(method,url,data){ //先创建一个ajax实例 var xhr = new XMLHttpRequest(); //onreadystatechange是个回调函数,当readyState里面的状态发生改变的时候都会去调用这个匿名函数。 xhr.onreadystatechange=function(){ //status里面保存的是HTTP状态码200代表页面响应成功 //readyState里面保存着AJAX执行到哪一步了4代表执行成功 if (xhr.status == 200 && xhr.readyState == 4) { //responseText保存着从服务器传输回来的内容 alert(xhr.responseText) } } //open()是用来规定请求的类型、URL 以及是否异步处理请求。的第一个参数是传输方法GET或POST, //第二个函数是提交地址,第三个参数是以同步还是异步传输。 //send()将请求发送到服务器;这里需要注意一下当是GET时参数可以不写可以写null,但是当时POST是这里必须写 //需要传输的内容也就是这里的data if (method == 'GET') { xhr.open(method,url+'?'+data,true) xhr.send(null) }else if(method == 'POST'){ xhr.open(method,url,true) //因为是POST提交所以需要设置一个头文件。模拟form表单提交***这个很重要*** xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //发送json格式的数据 //xhr.setRequestHeader("Content-type","application/json;charset=UTF-8"); xhr.send(data) }else{ alert('请输入正确的传输的方式') } } </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例