原生Ajax与JQuery的Ajax

最新推荐文章于 2024-10-17 17:15:00 发布

小飞全栈

最新推荐文章于 2024-10-17 17:15:00 发布

阅读量217

点赞数

分类专栏： Ajax 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/qq761358496/article/details/128161682

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生的Ajax

简介

中文名:异步与xml

Asychronous javaScript And XML

不是编程语言,ajax只是一种js的技术,

优点:再不用刷新网页的前提下与服务器实现交互

使用步骤

<script type="text/javascript">
  //创建IE7浏览器器与其他浏览器的方式
  
  //创建其他浏览器的方式
  var ajax01 = new XMLHttpRequest();
  
   //创建IE7一下版本
   var ajax02 = new ActiveXobject("Microsoft.XMLHTTP");
   
   //判断用户使用的浏览器是否支持XMLHttpRequest
   //true为支持
   //false为不支持
   console.log(window.XML.HttpRequest);
   
   
   1.创建ajax对象
   声明:
   var ajaxreq;
   判断是否支持XMLHttpRequest
   if(window.XML.HttpRequest){
    ajaxreq = new XMLHttpRequest();
   }else{
   	ajaxreq = new ActiveXobject("Microsoft.XMLHTTP");
   }
   
   2,打开对象
   /**
   *open(method, url, async)
   *method,请求方式get/post
   *url,请求地址 
   *async,是否同步
   */
   ajaxreq.open(method, url, async)
   3.设置回调
   ajaxreq.onreadystatechange function(evl){
		if (ajaxreq.readyState ==4 && ajaxreq.status==200) {
					var text ajaxreq.responseText;
					alert(text);
				}	
			}
	4.发送请求
	ajaxreq.send(null);
</script>

JQuery的Ajax

Ajax函数

$.ajax({
	url:请求地址,
	type:get/post,//请求方式
	headers:{	//设置请求头的参数
	key:"vuale1",
	key:"value2"
	},
	data:{		//data 传递的参数
	key1:"v1",
	key2:"v2"
	},
	contType:"application/json",//请求响应数据类型
	dataType:"json",//预期数据响应类型
	processData:false,//设置数据是否压缩
	success:function(res){
		//success: ajax请求成功后执行,参数res就是服务器返回的数据
	},
	error:function(e){ 
		//error: ajax请求出现错误执行,参数e表示异常信息对象
	}
	});

ajax函数注意点:

contentType:
	含义:发送数据到服务器所使用的内容类型
	默认是:"application/x-www-form-urlencoded"
	如果上传中有文件,将其你设为false
processData:
	含义:规定通过请求发送的数据是否转换为查询字符串。默认是 true。当上传文件时设置false
application/json与text/json:
	在使用上效果类似,application/json遵循的应用json议,text/json遵循的是文本json协议
	建议使用application/json	
FormData：表单数据
	如:做文件上传
        contentType,processData设置为false
        需要创建FormData对象,将上传的数据添加到该对象中,

get函数

$.get(
	url:"请求地址",
	data:{
	"key1":val1,
	"key2":val2,
	...
	}
	succes:function(resp){
	if(resp.code==0){
	//操作成功时
	}else{
	//请求成功,操作失败时
	}
	},
	"json"
);

post函数

$.get(
	url:"请求地址",
	data:{
	"key1":val1,
	"key2":val2,
	...
	}
	succes:function(resp){
	if(resp.code==0){
	//操作成功时
	}else{
	//请求成功,操作失败时
	}
	},
	"json"
);

获取单选按钮的值:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        获取多选按钮选中的值
        <script src="js/jquery-3.6.0.js" type="text/javascript"
        charset="utf-8"></script>
        <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
                var sex = $("input[name=sex]:checked").val();
                alert(sex);
            });
        });
        </script>
    </head>
    <body>
        <p>
            <p>1,选择您的性别?</p>
            <input type="radio" value="男" name="sex"/>
            男
            <br />
            <input type="radio" value="女" name="sex"/>
            女
            <br />
            <input id="btn" type="button" value="提交" />
        </p>
    </body>
</html>

获取多选按钮的值:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.0.js" type="text/javascript"
    charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
                var vs = $("input[name=like]:checked");
                var values = new Array();
                for(var i = 0; i < vs.length; i++){
                values[i] = vs[i].value;
                }
                alert(values);
            });
        });
    </script>
</head>
    <body>
        <p>
            <p>1,选择您的爱好?</p>
            <input type="checkbox" value="篮球" name="like"/>
            篮球
            <br />
            <input type="checkbox" value="足球" name="like"/>
            足球
            <br />
            <input id="btn" type="button" value="提交" />
        </p>
    </body>
</html>