ajax的详细介绍

ajax是什么

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法,通俗来说就是一种技术,一种请求的技术 ,前端对服务器或者数据库的数据进行请求,向后端发送数据请求。所谓的请求就是你想要从后端获取数据,这时你就要说一句话告诉后端:我要什么什么数据。

ajax特点

  • AJAX 是一种在无需重新加载整个网页的情况下,即一种异步加载。
  • 所谓异步,就要说到同步,js的代码执行,都是从上到下依次执行,这就是同步,但凡前面有一句代码报错就不会继续往下执行,也就是单线程。而异步就是:可以一边执行同步代码,一边执行异步的代码内容,两者互不干涉。
  • 可能有些细节说的不对,但大体的意思理解到了,对于ajax的理解就差不多了。

ajax的知识点

万物皆对象,ajax也是一种对象
XMLHttpRequest 对象方法如下:

   open("method","URL",[asyncFlag]):打开目标的地址{
   		open()有三个参数,method:请求的类型;GET 或 POST
						 url:文件在服务器上的位置,get请求时,会将
						 async:true(异步【默认】)或 false(同步)
		但一般都只会写两个,method:这里就写post,或者get
						  url:指的是请求文件的位置,也就是后端给你反回数据的代码位置
						  }
   send(") :将请求发送,get请求时,不需要写参数,但是post请求,会将参数写在里面,参数主要是你要请求数据的值
   xhr.setRequestHeader("Content-type", "application/x-www-from-urlencoded"):
   		post请求需要设置请求头的信息,这个可以不用去过分纠结这个,但大佬的话可以详细讲讲这个,
   		只需要在post发送请求之前在代码加上这句就行,不用特意去记怎么写

常用的属性:
1.onreadystatechange : Ajax状态码改变时所调用的回调函数(监听发送请求的情况)
2. readyState : Ajax状态码
a. 0:表示对象已建立,但未初始化 newXMLHttpRequest()
b. 1:表示对象已初始化,但未发送 open()
c. 2:已调用send方法进行请求 send()
d. 3:正在接收数据(接收到一部分)
e. 4:接收完成

3.status: 响应状态码 200(成功) 404(页面未找到)304(缓存)

4.responseText :响应文本信息
当服务器端返回的是字符串类型的文本数据时,Ajax通过responseText进行调用

先上代码看看(get请求)
/*
	1.ajax有很多种请求的方式,但常用的get,post;
	2.下面是get请求。
	3.ajax的写法都是固定的,大致就是4步
		a.万物皆对象嘛,首先肯定要实例一个ajax的对象
		b.利用ajax的open()方法
		c.写上send()方法//get请求send()方法就不用了写参数
		d.接下来就是事件处理,你发送了请求之后总得做的什么
			ajax请求会有一个监听事件,监听请求是否成功或者完成,
			
	
	注:对于对象不了解兄弟可以先去看看对象,了解一下,否则ajax会看着特别难受
*/
var xhr = new XMLHttpRequest();
        xhr.open('get', url); //url形如  ../php/ajax.php?id=2&wd='str'
        xhr.send();		
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {			//ajax请求会有请求的状态  4表示请求完成
                if (xhr.status === 200) {	//ajax还有一个请求的状态码,当status === 200表示请求成功,接下来就可以操作请求到的数据
                   console.log(xhr.responseText) //打印出请求的数据,
                   //有可能会是json类型的数据,所有有时会需要自己json转换一下(JSON.parse(xhr.responseText))
                }
            }
        }
POST请求

post与get的请求类似,差别不大,上代码

var xhr = new XMLHttpRequest();
        xhr.open('post', url);		url形如  ../php/ajax.php
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        //设置请求头信息
        xhr.send(str);  		//str 形如 id=2&wd='str'
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    //与get一样,成功后处理数据
                }
            }
        }
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值