Ajax发送请求
1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替); 主要是用于前后台的交互(表单提交已经被废弃); 使用场景:前台获取数据、表单的失焦验证; ? ? 2,如何在有服务的环境下使用ajax发送请求 1.创建ajax对象-xmlhttprequest对象:(分为两种类型) 在新版本的浏览器中:variable=new XMLHttpRequest(); 老版本的IE中:variable=new ActiveXObject("Microsoft.XMLHTTP"); 所以在这里我们需要考虑到兼容性的问题: var xhr; if(window.XMLHttpRequest){ //常规,如果有,直接使用 xhr = new XMLHttpRequest(); }else{ //如果没有,老版本IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); } console.log(xhr) console.log("状态码:" + xhr.readyState); console.log(‘响应码:‘ + xhr.status); console.log(‘响应文本:‘ + xhr.responseText); console.log(‘步骤一完成‘)
2.通过监听ajax的状态的改变来监听: xhr.onreadystatechange = function(){ console.log(‘xhr的状态码发生了改变‘); console.log("状态码:" + xhr.readyState); console.log(‘响应码:‘ + xhr.status); console.log(‘响应文本:‘ + xhr.responseText); console.log(‘n‘); } console.log(‘步骤二完成‘) ? 3.创建请求的消息,连接服务器 xhr.open(‘GET‘,‘07.php‘,true); //最后一个参数是bool,表示同步||异步,true异步 console.log(‘步骤三完成‘) ? 4.发送 xhr.send(null); //如果是post请求,就放post参数,如果是get请求,发送null就行了
5.附: 状态码: 0: 请求未初始化
? ? ? 3,使用ajax发送get请求 html部分: 用户名:<input type="text" id="username"> <span id="ts"></span><br> 密码:<input type="text"> <button id="btn">验证用户名</button> ? 原生js部分: <script> var username = document.getElementById("username"); var btn = document.getElementById("btn"); var ts= document.getElementById("ts"); // 点击btn发送ajax请求 btn.onclick = function(){ // 1.创建xhr var xhr; if(window.XMLHttpRequest){ //常规,如果有,直接使用 xhr = new XMLHttpRequest(); }else{ //如果没有,老版本IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 2.绑定监听函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ console.log(xhr.responseText) if(xhr.responseText == 1){ ts.innerHTML = "该用户名已经被注册" }else if(xhr.responseText == 0){ ts.innerHTML = "该用户名可以使用" } } } } // 3.建立连接 xhr.open("GET","08.php?uname=" + username.value,true); // 正则验证 // 4.发送请求 xhr.send(null) } //get是直接可以在地址栏中调试 </script> ? ? 4,使用ajax发送post请求 ?html: 学生姓名:<input type="text" id="uname"><br> 学生成绩:<input type="text" id="score"><br> <button id="btn">注册</button> <p id="p01"></p> ? 原生js部分: <script> function get_id(id){ return document.getElementById(id); } var uname = get_id("uname"); var score = get_id("score"); var btn = get_id("btn"); var p01 = get_id("p01"); var reg_name = /^[a-z]{3,10}$/g; var reg_score = /^d{1,2}$/g; var uname_flag = false; uname.onfocus = function(){ reg_name.lastIndex = 0; this.style.border = ‘1px solid #000‘ uname_flag = false; } uname.onblur = function(){ if(reg_name.test(uname.value)){ this.style.border = ‘1px solid #0f0‘; uname_flag = true; }else { this.style.border = ‘1px solid #f00‘ } } btn.onclick = function(){ if(uname_flag){ // 1. var xhr; if(window.XMLHttpRequest){ //常规,如果有,直接使用 xhr = new XMLHttpRequest(); }else{ //如果没有,老版本IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 2. xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if (xhr.status == 200) { console.log(xhr.responseText); p01.innerHTML = xhr.responseText; } } } // 3. xhr.open(‘POST‘,‘http://localhost:8888/0220ajax/09.php‘,true); // 3.5 在发送post请求的时候,你得告诉服务器你发送的是一个什么 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 4.发送 xhr.send(‘strName=‘ + uname.value + ‘&strScore=‘ + score.value); } } </script> ? ? ? 5,使用jQuery—ajax发送get请求 用户名:<input type="text" id="username"> <span id="ts"></span> <br> 密码: <input type="text"> <button id="btn">验证用户名</button> $("#btn").click(function(){ $.ajax({ type : "GET",url : "01.php?uname=" + $("#username").val(),success : function(data){ //就是原生的xhr.responseText console.log(data); if(data == 0){ $("#ts").html("该用户名可以使用").css("color","green"); }else if(data == 1){ $("#ts").html("该用户名已被占用").css("color","red"); } },error : function(err){ //错误的 console.log(err) } }) }) ? ? 6,使用jQuery—ajax发送post请求 ?(html部分与上面相同相同) $("#btn").click(function(){ $.ajax({ type : "POST",url : "http://192.168.9.154:8888/0221ajax/01.php",data : { uname : $("#username").val() },error : function(err){ //错误的 console.log(err) } }) }) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- SQLite 设计与概念
- ruby-on-rails – 使用STI基类的Rails form_for
- 如何处理typedef而不在头文件中包含头文件
- 【cocos2d-js教程】cocos2d-js中使用cocosbuilder绑定变量和
- PullToRefresh使用详解(二)---重写BaseAdapter实现复杂XML下
- ruby-on-rails – 使用RAILS使用特殊字符进行JSON序列化和反
- ruby – 工厂女孩的奇怪问题
- JLINK烧写BIN文件到nand、norflash、SDRAM
- 从Oracle 10g上的webapp链接“链接javax / xml / namespace
- 如何从RAISED异常中获取oracle PL / SQL中原始异常的堆栈跟