zoukankan      html  css  js  c++  java
  • ajax学习1--使用原生js调用

    ajax使用流程:

    	1、创建ajax引擎对象
    	2、声明监听函数
    		//判断ajax状态码
    			//判断响应状态码
    				//获取响应信息(普通字符串和json格式的字符串)
    				//处理响应
    	3、创建并发送ajax请求
    		创建请求(设置请求方式,设置请求地址,设置异步或者同步)
    		发送请求
    	4、其他处理
    
      ## 流程详解:
            ### 1、创建ajax引擎对象
            ### 2、声明事件监听:监听ajax对象的属性readystate的值,一旦readystate的值发生改变就会触发声明的函数的执行
    		ajax的状态码之readyState的值:
    			0:表示ajax引擎对象创建
    			1:表示请求创建但是未发送  ajax.open("get","my");
    			2:请求发送 ajax.send(null);
    			3:请求处理完毕,正在接收响应内容
    			4:响应内容接收完毕(重要状态)
    		ajax之响应状态码:ajax.status
    			 200:表示一切正常
    			 404:资源未找到
    			 500:服务器内部错误
    		ajax之响应数据		 
    			服务器响应给浏览器的数据应该是字符串类型
    			但是如果数据量比较大,我们就需要在服务器端将数据拼接成一个良好格式的字符串数据,响应给浏览器。
    			浏览器根据格式进行数据的解析和使用。
    			问题:
    				什么样的格式算是良好的格式呢?
    			解决:
    				使用json格式的字符串
    			json的概念:
    				其实json就是js创建对象的一种格式。保证对象中数据的紧密性 和完整性。
    			json的格式:
    				var 对象名={
    					键名:值,
    					键名:值,
    					...
    					键名:值
    				}
    			使用:
    				在服务器端将要响应的数据拼接成json格式的字符串,这样客户端(浏览器端)在接收到响应数据后
    				可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据的操作。
    				我们可以在服务器端使用类似Gson的工具包完成json格式字符串的拼接。
        ### 3、创建并发送ajax请求
    		创建ajax请求(设置异步或者同步)
    			ajax.open(method,url,ansyc);
    				method:表示请求方式
    					get方式:请求数据以?隔开的形式拼接在url的后面。
    							请求数据不能写在send方法中
    					post方式:
    						post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    						设置请求数据为键值对数据。如果有请求数据则ajax.send("键值对数据&键值对数据..."),如果没有请求数据
    						则ajax.send(null)
    				url:请求地址
    				ansyc:设置异步或者同步请求,true表示异步,false,表示同步。默认是异步的。
    					 异步:
    					 	当前js函数继续执行,无须等待ajax请求的响应以及响应的处理。
    					 同步:
    					 	当前js函数会等待ajax请求以及响应,当ajax响应处理完毕后,继续执行函数的剩余代码。
    		发送ajax请求
    			//get方式
    				ajax.send(null);
    			//post方式
    				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    				ajax.send("uname=张三&pwd=123");
    

    代码:

          //声明单击事件--非ajax
    	     	function test(){
    	     		window.location.href="my";
    	     	}
         	//声明单击事件--ajax
         		function testAjax(){
         			//创建Ajax引擎对象
    	     			var ajax;
    	     			if(window.XMLHttpRequest){//火狐
    	     				ajax=new XMLHttpRequest();
    	     			}else if(window.ActiveXObject){//ie
    	     				ajax=new ActiveXObject("Msxml2.XMLHTTP");
    	     			}
    	     		//声明事件监听
    	     			ajax.onreadystatechange=function(){
    	     				//判断ajax的状态码
    	     				if(ajax.readyState==4){
    	     					//判断响应状态码
    	     					if(ajax.status==200){
    	     						//处理响应
    			     					//获取响应内容
    			     						var data=ajax.responseText;
    	     							//使用eval方法将字符串数据转换为js对象
    	     								eval("var obj="+data);//eval("var obj={uid:18,uname:'王五',age:18,fav:'看电影'}")
    			     					//获取div对象
    			     						var div=document.getElementById("showdiv");
    			     						div.innerHTML=obj.fav;
    	     					}else if(ajax.status==404){
    	     						//获取div对象
    	     						var div=document.getElementById("showdiv");
    	     						div.innerHTML="请求资源不存在";
    	     					}else if(ajax.status==500){
    	     						//获取div对象
    	     						var div=document.getElementById("showdiv");
    	     						div.innerHTML="内部服务器繁忙";
    	     					}else{
    	     						//获取div对象
    	     						var div=document.getElementById("showdiv");
    	     						div.innerHTML="未知异常";
    	     					}
    	     				}
    	     			}
    	     		//发送请求
    	     			//get请求方式
    		     			/* //创建请求
    		     				ajax.open("get","my?uname=张三&pwd=123",false);
    		     			//发送请求
    		     				ajax.send(null); */
    		     		//post请求方式
    		     			//创建请求
    		     			ajax.open("post","my",false);
    		     			//设置请求参数为键值对方式
    		     			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		     			//发送请求
    		     			ajax.send("uname=张三&pwd=123");
    	     		//异步同步
    	     			var div=document.getElementById("showdiv");
    	     			alert(div.innerHTML);
         		}
         	//使用js方式添加监听事件及其监听的函数
         	function testD(){
         		var btn=document.getElementById("btn");
         		btn.onclick=function(){
         			alert("aaaa");
         		}
         	}
         	//js中的josn对象
         		//创建js对象
         		var obj={};
         		//声明对象内容
         		obj.name="张三";
         		obj.pwd="123";
         		//使用json方式创建对象
         		var obj2={
         			name:"李四",
         			pwd:"123"	
         		};
         	var str="{name:'李四',pwd:'123'}";
         		
         		
         		alert(obj.name+":"+obj2.name);
    
    重视基础,才能走的更远。
  • 相关阅读:
    Mysql集群
    Redis集群
    Python3 实现数据读写分离设计
    PHP Session的优化使用
    防盗链与token运用
    PHP与REDIS
    优化设计提高sql类数据库的性能
    Nodejs密集型CPU解决方案
    可重入和线程安全
    信号处理函数编写规则
  • 原文地址:https://www.cnblogs.com/xzlf/p/12904863.html
Copyright © 2011-2022 走看看