ajax中的get和post

ajax概念：

一般情况下，前端和后台进行交互都需要页面跳转才能获取到新的数据，然后重新跳转到一个页面，将数据加载到页面上。这对资源的消耗很大，用户体验感也不是很好。

所以js提供了一个不需要刷新页面就能加载后台数据的技术：AJAX。全称：async javascript and XML，是一个异步执行的和后台交互的技术。

AJAX的优势：

1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）
2.用户体验极佳（不刷新页面即可获取可更新的数据）
3.提升 Web 程序的性能（在传递数据方面,不必整体提交）
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）
缺点：搜索引擎的支持度不够（因为搜索引擎爬虫暂时还不能理解 JS 引起变化数据的内容）

AJAX的书写:

1.创建ajax对象：

var AJAX=new XMLHttpRequest(); // 这种写法在ie下是不能兼容的
var AJAX = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容ie678

兼容所有浏览器的兼容写法:

function createAJAX(){
	var AJAX = null;
    if(window.XMLHttpRequest){
        AJAX=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        AJAX = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        alert("请升级浏览器");
    }
    return AJAX;
}

2.建立一个http请求：

AJAX.open(请求方式,请求地址,true);//第三个参数可省略，默认是异步请求
	参数1：请求方式：get/post
	参数2：请求地址
	参数3：true是异步请求，false是同步请求（默认true）

3.监听ajax请求状态的改变:

AJAX.onreadystatechange = function(){
	if (AJAX.readyState == 4 && AJAX.status == 200) {
        AJAX.responseText; // 从服务器返回的文本信息
   	}
}

注意：
①onreadystatechange是状态改变事件，只要ajax状态发生改变就会触发这个事件
②readyState是ajax对象请求的状态
        0：未初始化，对象已经建立，但是还未初始化，就是还未调用send方法
        1：已经初始化，但是还没有调用send方法
        2：发送数据，send方法已经调用，但是http头未知
        3：数据接收中，已经接收部分数据，因为响应以及http头不全，这是通过responseText获取少部分数据会出现错误
        4：请求完成，数据接收完毕，此时可以通过responseText获取完整的相应数据
③responseText是接收服务器响应的字符串数据，如果是xml数据使用responseXML来接收，如果是json数据，其实也是使用字符串形式相应回来的，使用responseText接收以后，使用JSON.parse(str)或str.parseJSON()转为json对象处理

4.发送请求：

ajax.send(null);

注意：
如果是post请求的话，需要在发送请求前，设置post请求头，模拟表单来传递数据给服务端（否则获取不到send中的参数）

ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
然后发送这个请求 - send发送请求的时候要携带请求参数（键1=值1&键2=值2）
AJAX.send（"传送请求主体"）//传送请求主体例如：'name=Jack&age=18&gender=男'

防止乱码的几种方法：

1.确保数据库的字符集和排序规则是正确的
2.建表的语句中要确保表的编码是正确的
3.创建栏位（字段）是字符串类型的，一定要确保字符集和排序规则是正确的
4.在php文件中，一定要写header("Content-type:text/html;charset=utf-8");
5.在执行语句之前，先执行一个编码设置的语句：mysqli_query（$con，“set names utf8”）；
6.在html页面中，确保有<meta charset = 'utf-8'>
7.有些浏览器需要手动改编码
8.有可能是编辑器的问题
9.确保上述编码保持一致

ajax概念：

AJAX的优势：

AJAX的书写:

防止乱码的几种方法：

猜你喜欢