JavaScriptAJAX

Posted 2021-02-12 街特闷

 

一、什么是AJAX

AJAX  是一门技术 不是一门语言

不需要重新加载整个页面的情况下可以实现数据的局部更新 叫做页面无刷新操作

使用AJAX 可以快速的创建动态页面

AJAX在2005年由谷歌推广的一种编程模式

二、优点

1．无刷新操作

2．减少客户的实际和心里等待时间  可以更好的实现用户体验

三、缺点:

 因为AJAX 是由大量的JS代码组成浏览器兼容性问题

四、使用原理

1．创建请求(获取AJAX对象)

 var AJAX对象 = new XMLHttpRequest();

2．建立连接

AJAX对象.open(请求方式，请求文件，请求方法)

1. 请求方式

a) get

没有特殊内容 正常地址连传递参数就可以了

b) post

如果是post请求 一定要写上下面的代码否则接受不到数据

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

1. 请求文件 就是你要访问的php文件
2. 请求方法

a) true 异步请求

b) false 同步请求

3．发送请求

ajax对象.send()

可以传递post传输的参数

4．接受响应数据

0  请求未初始化

1  请求已建立连接

2  请求已接受

3  请求处理中

4  请求完成且响应就绪

HTTP状态码

5．连接AJAX 出现下面报错信息

Access to XMLHttpRequest at ‘file://xxxxxx/xxxx/xxx/xxxx/ajax.php‘ from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

请使用http方式访问页面 不要使用file协议访问页面

 

五、JSON

1．js与php交互的语言

 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

2．php中将数组变为json字符串

使用json_encode() 将php数组转换为json字符串

3．php中将json字符串转换为php数组

使用 json_decode() 将json字符串转换为php能解析的内容 得到对象 请在json_decode函数传递第二个参数 参数值为true

4．js中处理json字符串

（1）eval() 函数  但是需要在传递的时候将传递的字符串外面加上一个小括号才可以执行里面的内容

（2）JSON.parse()