ajax
应用场景:
asynchronous javascript and xml == ajax
- 在注册一个网站,输入用户名时,
- ajax其实就是js对象,应用在与服务器进行交互的过程
- 在搜索框中输入内容,下边会显示一些高频的词汇
- 局部页面刷新
使用ajax步骤:
- ajax对象var xhr = new XMLHttpRequest();
- xhr.open()//1. 请求的方式get post 2.请求的连接地址 3.是异步请求还是同步请求 默认是异步请求 true 同步请求false
- xhr.send();
总结:
- 以get方式传递参数请求后台数据
var xhr = new XMLHttpRequest();
xhr.open(‘get’, ‘url地址’, ‘是异步还是同步’)
xhr.send(); - 以post方式
var xhr = new XMLHttpRequest();
xhr.open(‘post’, ‘url地址’, ‘是异步还是同步’)
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xhr.send(传递后台需要的参数);
ajax对象属性
- responseText: 从后台返回来的json数据
- onreadystatechange:是一个事件, 当ajax的状态发生改变的时候来触发它
- readyState:(0,1,2,3,4)
0:初始化
1.执行了open方法\执行send方法
2.载入完成,接收服务器端的响应数据
3.解析接收到的服务器端响应数据
4.数据都已经解析为客户端可用的格式,解析已经完成 - status: 响应成功后返回的状态 一般 200 OK
ajax请求函数封装
encodeURIComponent
同步和异步
- 同步: 当我们请求服务器时,服务器处理完数据之后返回过来,然后与前台一起执行.
- 异步:当我们请求服务器时,服务器自己处理数据,并且前台程序执行没有关系,.前台程序继续往下执行,等后台数据处理完之后再往下执行.
[注]在实际开发中大多数都用到异步请求
跨域的问题:
-
跨域其实就是跨域名进行请求
127.0.0.1 和 localhost 不是同一个域名 -
一般情况通过ajax是没办法跨域的;
现在我们要想进行ajax跨域怎么办?
答: 我们可以通过两种进行ajax跨域- 方式一:
在请求的PHP文件中写上header头header(‘Access-Control-Allow-Origin:*’);
- 方式二:
在js中自定义一个函数 function fn(data) { //data是json格式的字符串 //转换成对象 var obj = JSON.parse(data); console.log(data); } 在js中直接引入这个文件 <script type="text/javascript" src="http://www.test.com/index.php"></script>
- 方式一:
配置虚拟主机域名:
- 修改hosts文件 c://windows/system32/drivers/etc/hosts
- 修改apache配置文件C:\wamp64\bin\apache\apache2.4.17\conf
- 修改C:\wamp64\bin\apache\apache2.4.17\conf\extra
<VirtualHost *:80>
ServerName www.test.com
DocumentRoot c:/wamp64/www/test
<Directory “c:/wamp64/www/test/”>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require local
</VirtualHost>