博客列表 >AJAX上传

AJAX上传

有什么是忘不了的的博客
有什么是忘不了的的博客原创
2019年12月05日 11:53:28715浏览

单看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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

        

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议