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一样，成功后处理数据
                }
            }
        }